小程序表单校验即wxVaildate使用

小程序表单校验即wxVaildate使用

在小程序里面遇到表单校验的需求,如果一个用if…else 判断是十分麻烦的所以用了wxVaildate插件,用起来很方便的,记录一下

---

wxVaildate参考jQuery Validate开发的一个针对小程序的表单校验插件

使用

使用的时候直接在js里引用就行了

import WxValidate from '../../utils/WxValidate.js'

其中rules用来定义规则,message用来定义字段验证失败的提示,最后注册到WxValidate的实例上就行了,字段的名称要和input元素上的name相同 ,还可以自定义规则 ,下面是范例,我觉得应该写的很详细了!!!

 //xxx.wxml
 
 <view class="weui-cell__bd">
    <input class="weui-input"  name="email" value="{{form.email}}" placeholder="请输入邮箱"/>
</view>
<view class="weui-cell__bd">
     <input class="weui-input"  name="tel" value="{{form.tel}}" placeholder="请输入电话号码"/>
</view>
<view class="weui-cell__bd">
     <input class="weui-input"  name="idcard" value="{{form.idcard}}" placeholder="请输入身份证"/>
</view>

// 验证字段的规则
const rules = {
    email: {
        required: true,
        email: true, //现成的一些校验规则,具体可直接看文档
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
        length: true
    },
}

// 验证字段的提示信息，若不传则调用默认的信息
const messages = {
    email: {
        required: '请输入邮箱',
        email: '请输入正确的邮箱',
    },
    tel: {
        required: '请输入手机号',
        tel: '请输入正确的手机号',
    },
    idcard: {
        required: '请输入身份证号码',
        idcard: '请输入正确的身份证号码',
    },
}
// 创建实例对象
this.wv = new WxValidate(rules, messages)
//自定义规则
this.wv.addMethod('length', (value, param) => {
  return value.length() == 18
}, '不好意思身份证长度为18位')

然后在提交表单的时候 只要调用checkForm(params)方法就好了

 if (this.wv.checkForm(params)) {
     //规则全部通过就执行这里
 }else {
 //这里我只显示最前面的一条错误,errorList是错误的列表
     let  error = this.wv.errorList[0]
      this.showModal(error)
 }