小程序 表单验证
使用 WxValidate.js 插件来校验表单数据
常用实例方法
| 名称 | 返回类型 | 描述 |
|---|---|---|
| checkForm(e) | boolean | 验证所有字段的规则，返回验证是否通过。 |
| valid() | boolean | 返回验证是否通过。 |
| size() | number | 返回错误信息的个数。 |
| validationErrors() | array | 返回所有错误信息。 |
| addMethod(name, method, message) | boolean | 添加自定义验证方法。 |
内置校验规则
| 序号 | 规则 | 描述 |
|---|---|---|
| 1 | required: true | 这是必填字段。 |
| 2 | email: true | 请输入有效的电子邮件地址。 |
| 3 | tel: true | 请输入11位的手机号码。 |
| 4 | url: true | 请输入有效的网址。 |
| 5 | date: true | 请输入有效的日期。 |
| 6 | dateISO: true | 请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。 |
| 7 | number: true | 请输入有效的数字。 |
| 8 | digits: true | 只能输入数字。 |
| 9 | idcard: true | 请输入18位的有效身份证。 |
| 10 | equalTo: 'field' | 输入值必须和 field 相同。 |
| 11 | contains: 'ABC' | 输入值必须包含 ABC。 |
| 12 | minlength: 5 | 最少要输入 5 个字符。 |
| 13 | maxlength: 10 | 最多可以输入 10 个字符。 |
| 14 | rangelength: [5, 10] | 请输入长度在 5 到 10 之间的字符。 |
| 15 | min: 5 | 请输入不小于 5 的数值。 |
| 16 | max: 10 | 请输入不大于 10 的数值。 |
| 17 | range: [5, 10] | 请输入范围在 5 到 10 之间的数值。 |
根据 WxValidate.js 插件，定义 验证函数 initValidate 的规则及返回的信息，在 onLoad 生命周期中调用
使用 bindinput 、 bindblur 绑定事件和data-name传入对应的表单字段名 来实现单个输入框失焦的验证
initValidate() {//验证规则和提示信息let rulesAndMsg = {Name: {rules: {required: true},message: {required: '请输入姓名'}},IDCard: {rules: {required: true,idcard: true,},message: {required: '请输入身份证号',idcard: '请输入正确的身份证号码',}},Age: {rules: {required: true,rangeRom: [1, 120],},message: {required: '请输入年龄'}},}//实例化当前的验证规则和提示消息this.WxValidate = new WxValidate(rulesAndMsg);/*** 自定义验证规则传3个参数* name 是添加的方法的名字* method 是一个函数,value:元素的值，param是参数* message 是自定义的错误提示*/this.WxValidate.addMethod('rangeRom', (value, param) => {return this.WxValidate.optional(value) || (value >= param[0] && value <= param[1])}, '年龄范围是: 1-120');},提交时校验
if (!this.WxValidate.checkForm(this.data.form)) {//表单元素验证不通过，此处给出相应提示this.setData({errorList: this.WxValidate.errorList,})return false;}更改了方法具体文件点此处详见