小程序表单校验即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)
}