027-87227388

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

发布时间:2022-04-27 浏览:3376

一、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'
      })
    }
  }
})