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

---

前言

微信小程序中的表单要进行验证，可以使用第三方插件：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>
1

rules规则书写格式如下。

rules={
  nick:{
    required:true,        // name属性取值为nick的表单元素不得为空
    maxlength:12          // 输入的文本个数不得超过12位
  },
  // 其他表单元素的验证规则
}
1
2
3
4
5
6
7

2、参数messages

该参数用来指定表单元素在输入时违反了rules指定的规则后给出的提示语。这个提示语也同样采用对象的形式进行书写。与rules格式相同，对象的属性名时表单元素name属性的取值，属性值是由多个规则组成的新对象。

例如：根据rules规则的要求，我们为nick文本框“不得为空”和“最大不超过12个字符”这两个规则设置违反规则时的提示语。

messages={
  nick={
     required:“您的昵称不得为空”,            // 违反“不得为空”时给出的提示语
     maxlength:“昵称最多输入12个字符”        // 违反“最大不超过12个字符”时给出的提示语
  }
}
1
2
3
4
5
6

3、创建WxValidate类的实例

有了rules和messages两个参数，就可以创建WxValidate类的实例了。代码如下所示。

let validate=new WxValidate(rules,messages);
1

二、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} 之间的数值。'),
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

上述源代码出现在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是所有表单元素的取值
1

若取值为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'
   })
}
1
2
3
4
5
6
7
8
9
10
11

四、WxValidate类在小程序页面中的部署

1、将WxValidate.js复制到小程序的utils文件夹中。

2、在用到表单验证的页面的js文件中导入WxValidate.js模块。

import WxValidate from '…………(path)/utils/WxValidate.js';
1

3、设置validate全局变量，准备存储WxValidate类的实例。

let validate = null;
1

4、在小程序页面的onLoad生命周期中创建rules和messages参数，并生成WxValidate类的实例。

onLoad(){
  let rules={};
  let message={};
  validate=new WxValidate(ruels,message);
}
1
2
3
4
5

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’
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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'
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

---

总结

本文系统的讲解了WxValidate.js的使用，该包的下载地址：

https://download.csdn.net/download/web_front_hai/13583475

大家在使用的时候要根据自身项目的实际情况，对本文中的代码进行必要的调整。只要跟着文章中的步骤一步一步的实际操作一遍，相信大家都可以顺利而高效的完成微信小程序中表单元素的正确性验证的。

关于作者

小海前端，具有18年Web项目开发和前后台培训经验，在前端领域著有较为系统的培训教材，对Vue.js、微信小程序开发、uniApp、React等全栈开发领域都有较为深的造诣。入住CSDN，希望能够更多的结识Web开发领域的同仁，将Web开发大力的进行普及。同时也愿意与大家进行深入的技术研讨和商业合作。