携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

前言

在我负责微信小程序项目的时候，出现了许多需要表单验证的地方，比如输入框验证，并弹出提示字符

那这样的输入框验证提示效果是如何实现的呢？

输入框下文字提示

第一步：编写输入框组件

<input model:value="{{code}}" bindinput="getData" placeholder="请输入.." />

第二步：编写下面的提示信息，用wx:if来控制是否显示

wx:if类似于vue框架里的v-if，都是条件为真时显示标签，也是通过创建和销毁dom元素的方法来进行dom元素的显示和隐藏

<text wx:if="{{ errortClass }}">回单编号需为8位数字</text>

第三步：在js文件里声明一个Boolean类型的，变量名为errortClass变量，并赋默认值为false

Page({
    data:{
       errorClass:false
       }
    })

第四步：在输入框为输入状态时，会触发bindinput绑定的getData事件，去判断是否符合验证规则，若不符合，则给errorClass赋值true

小程序中，bindtap是键盘输入时触发，event.detail = {value, cursor, keyCode}

Page({
    data:{
       errorClass:false
       },
     getData(e){
         let value = e.detail.value
         if(value.length !== 8) this.data.errorClass = true
         //小程序必须用this.setData方法重新渲染页面
         this.setData({ errorClass : this.data.errorClass }) 
     }
    })

输入框样式+文字提示

当然微信小程序里除了文字提示，也有改变输入框样式的提示方式

比如做重置密码业务需求时，也需要这样的验证：

其实实现这个效果是在标签里，用了动态样式绑定+三元表达式

class="{{ Boolean类型变量？样式1：样式2 }}"

如果变量为true，则用样式1，否则用样式2 在重置密码这个场景里，我是这么写的

<view class="{{inputError?'error_box':'cell_box'}}">
 <view class=" flex-wrp">
    <text class="flex-item">确认新密码：</text>
    <input class="flex-item" type="password"  value="{{forms.ConfrimNew}}" bindblur="vaildData" data-key="ConfrimNew" placeholder="再次输入新密码" />
  </view>
</view>
<view wx:if="{{inputError}}">
     <text class="errorMsg">两次输入的新密码不一致！</text>
</view>

bindblur是输入框失去焦点时触发，声明了一个inputError变量，并赋默认值为false，当inputError的值为true，时显示提示语，并给输入框用error_box样式,当inputError的值为false时，则不显示提示语,这样就可以实现输入框验证提示的业务需求啦

微信小程序输入框验证提示的样式

前言