一、WxValidate类的构造函数
WxValidate类是整个插件中唯一的类，该类的构造函数具备两个参数：rules和messages。这两个参数均是对象格式的数据。
1、参数rules
该参数用来指定表单元素在进行正确性验证时应该遵循的规则。这个规则采用的对象的形式进行书写，其中表单元素在wxml文件中name属性的取值为rules对象的属性名，对应的属性值是使用多个规则组成的新对象。
例如：微信小程序的wxml文件中有一个用于输入昵称的文本框，要求该文本框必须输入内容，即不得为空，同时输入的文本不得超过12位。wxml代码如下所示。
<input type="text" placeholder="您的昵称" name="nick"></input>
rules规则书写格式如下。
rules={ nick:{ required:true, // name属性取值为nick的表单元素不得为空
maxlength:12 // 输入的文本个数不得超过12位
}, // 其他表单元素的验证规则}2、参数messages
该参数用来指定表单元素在输入时违反了rules指定的规则后给出的提示语。这个提示语也同样采用对象的形式进行书写。与rules格式相同，对象的属性名时表单元素name属性的取值，属性值是由多个规则组成的新对象。
例如：根据rules规则的要求，我们为nick文本框“不得为空”和“最大不超过12个字符”这两个规则设置违反规则时的提示语。
messages={
nick={ required:“您的昵称不得为空”, // 违反“不得为空”时给出的提示语
maxlength:“昵称最多输入12个字符” // 违反“最大不超过12个字符”时给出的提示语
}
}3、创建WxValidate类的实例
有了rules和messages两个参数，就可以创建WxValidate类的实例了。代码如下所示。
let validate=new WxValidate(rules,messages);
二、WxValidate的内置校验规则
WxValidate类为日常中常用的验证机制设置了内置校验规则，这些规则都可以根据实际项目的需要书写在rules中，前面的required和maxlength都是它的内置校验规则。
WxValidate.js中有关内置校验规则的源代码如下所示。
/**
* 初始化默认提示信息
*/__initDefaults() { this.defaults = { messages: { required: '这是必填字段。', email: '请输入有效的电子邮件地址。', tel: '请输入11位的手机号码。', url: '请输入有效的网址。', date: '请输入有效的日期。', dateISO: '请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。', number: '请输入有效的数字。', digits: '只能输入数字。', idcard: '请输入18位的有效身份证。', equalTo: this.formatTpl('输入值必须和 {0} 相同。'), contains: this.formatTpl('输入值必须包含 {0}。'), minlength: this.formatTpl('最少要输入 {0} 个字符。'), maxlength: this.formatTpl('最多可以输入 {0} 个字符。'), rangelength: this.formatTpl('请输入长度在 {0} 到 {1} 之间的字符。'), min: this.formatTpl('请输入不小于 {0} 的数值。'), max: this.formatTpl('请输入不大于 {0} 的数值。'), range: this.formatTpl('请输入范围在 {0} 到 {1} 之间的数值。'),
}
}
}上述源代码出现在WxValidate.js源文件的第35行至第60行。该部分代码的功能是初始化默认的提示信息，即设置违反同类规则时给出的默认提示语。我们从上述代码中可以侧面获取到该类提供的内置校验规则，并使用在自己的表单验证上。
需要注意的时，在默认提示信息中，不存在{0}和{1}的规则在rules对象中的取值均为逻辑值，即true或false。存在一个{0}的取值为普通数据类型数据，例如：equalTo取值为字符串，contains取值为字符串，minlength和maxlength取值为数值，min和max取值为数值。同时存在{0}和{1}的取值为数组，数组中包括两个数组元素，第一个数组元素与{0}相对应，第二个数组元素与{1}相对应，例如range取值为[5,10]，表示输入的数据范围必须在5到10之间。
三、WxValidate的表单验证方法
WxValidate类具备一个用于对表单进行统一验证的方法：checkForm()，该方法的参数是一个对象，存储了所有需要验证的表单元素的取值。其中对象的属性名依然为表单元素name属性的取值，属性值是用户在表单元素中输入或选择的最终结果。
该方法具备一个返回值，返回值的类型为逻辑值。若返回true，则表示所有的表单元素均通过了rules验证机制；若返回false，则表示有表单元素没有通过对应的rules验证机制。
checkForm()方法使用WxValidate类的实例调用，调用格式如下所示。
let result=validate.checkForm(event.detail.value); //这里event.detail.value是所有表单元素的取值`
若取值为false，则发生错误的表单元素信息都存储在validate.errorList数组中。该数组的数组元素是JSON数据，其中param属性指定了发生错误的表单元素的name属性取值，msg属性指定了校验错误时给出的提示语，value属性指定了此时表单元素的取值。如下图所示。
根据上述内容，我们可以将checkForm()方法的使用归纳为下列算法：
let result=validate.checkForm(event.detail.value);if(result){ // 所有的表单元素都通过了rules验证规则
// 调用后台接口向服务器提交表单数据}else{ let msg=validate.errorList[0].msg; //获取errorList数组中第一个验证错误的提示信息
wx.showToast({ //使用wx.showToast() API将提示信息弹出给用户
title: msg, icon:'none'
})
}四、WxValidate类在小程序页面中的部署
1、将WxValidate.js复制到小程序的utils文件夹中。
2、在用到表单验证的页面的js文件中导入WxValidate.js模块。
import WxValidate from '…………(path)/utils/WxValidate.js';
3、设置validate全局变量，准备存储WxValidate类的实例。
let validate = null;
4、在小程序页面的onLoad生命周期中创建rules和messages参数，并生成WxValidate类的实例。
onLoad(){ let rules={}; let message={};
validate=new WxValidate(ruels,message);
}5、在表单的bindsubmit事件中利用validate实例进行验证：
// 表单的submit事件formSubmit(event){ let result=validate.checkForm(event.detail.value); if(result){ //调取接口提交数据
}else{ let msg=validate.errorList[0];
wx.showToast({ title:msg, icon:‘none’
})
}
}6、完整的代码如下所示。
import WxValidate from '../../utils/WxValidate';let validate=null;Page({ data: { }, onLoad: function (options) { let rules={ person:{required:true}, phone:{required:true,tel:true}, hourse:{required:true}
}; let message={ person:{required:'收货人姓名不得为空'}, phone:{required:'电话号码不得为空',tel:'请填写有效地手机号码'}, hourse:{required:'所在小区不得为空'}
};
validate=new WxValidate(rules,message);
},
formSubmit(event){ let result=validate.checkForm(event.detail.value); if(result){
wx.request({……})
}else{ let msg=validate.errorList[0].msg;
wx.showToast({ title: msg, icon:'none'
})
}
}
})