小程序 表单验证

使用 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;}

更改了方法具体文件点此处详见