微信小程序中的表单验证机制

---

前言

微信小程序中的表单要进行验证，可以使用第三方插件：WxValidate.js。该插件约有12.8KB左右，采用ES6中class类的方式进行编写，所定义的类名为WxValidate，并最终将该类导出。本文将详细讲解WxValidate.js插件在微信小程序表单验证中的使用方法。

---

一、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