微信小程序下表单验证的插件：WxValidate.js

淡淡的烟草味﹌ 2023-07-19 10:44 10阅读 0赞

**（1）将WxValidate.js文件复制到utils文件夹中。**  
**（2）将WxValidate.js作为模块载入到需要用到的页面js文件中：**

*  A .CommonJS规范：  
    暴露：module.exports 引入：require()
 *  B .ES6规范  
    暴露：export default 引入：import from
 *  C .引入代码：import WxValidate from “…/…/utilss/WxValidate.js”;  
    **（3）在onLoad事件中创建WxValidate类的实例：**  
    实例名 = new WxValidate(rules,messages);  
    参数：rules-对象，指定表单元素的验证规则。  
    键名：需要验证的表单元素的name属性的取值。  
    键值：\{\},键名是验证规则，键值是规则的取值。  
    messages-对象，指定表单元素的规则被违反后给出的提示语。  
    键名：需要验证的表单元素的name属性的取值。  
    键值：\{\},键名是验证规则，键值是违反规则的提示语。  
    **（4）在表单的bindsubmit事件中对表单元素进行验证：**  
    调用WxValidate类的实例的checkForm()方法来进行验证。  
    checkForm(用户在所有表单元素中输入的数据)方法的返回值若为true，表示通过验  
    证。若为false表示没通过验证。  
    WxValidate类的实例的errorList属性是一个数组，用来记录所有的错误，数组元素的msg属性是错误提示语。  
    具体代码如下：

import WxValidate from “../../utils/WxValidate.js”   //WxValidate是类名
    var validate=null;    //validate是实例名的全局变量
    Page({
        onLoad:function(){
          var rules={
            userName:{required:true},
            userPhone:{required:true, tel:true}
    };
          var messages={
            userName:{required:“您的姓名不得为空”},
            userPhone:{required:“您的电话不得为空”, tel:“必须填写11位手机号码”}
    };
          validate=new WxValidate(rules,messages)
    },
    formSubmit(event){
      var result=validate.checkForm(event.detail.value);
      if(result){
        console.log(“验证通过”);
    }else{
      var error=validate.errorList[0];
      wx.showToast({
        title:error.msg,
        icon:“none”
    })
    }
    }
    })

## WxValidate的验证规则： ##

（1）required:true/false，是否为必填字段。  
（2）email:true/false，是否遵守电子邮件格式。  
（3）tel:true/false，是否遵守11位手机号码。  
（4）url:true/false，是否遵守域名格式。  
（5）idcarad:true/false，是否遵守18位身份证号格式。  
（6）digits: true/false，只能输入数字。  
（7）min:数值，指定最小值。  
（8）max:数值，指定最大值。  
（9）range:\[min,max\]，指定范围。  
（10）minlength:数值，指定最少输入的字符个数。  
（11）maxlength:数值，指定最多输入的字符个数。  
（12）rangelength:\[minlength,maxlength\]，指定输入字符个数的范围。  
（13）dateISO:true/false，说服遵守日期格式（yyyy-mm-dd、yyyy/mm/dd）。  
（14）equalTo:字符串，指定必须输入完全相同的内容。  
（15）contains:字符串，指定必须输入包含指定字符串的内容。