小程序表单校验插件WxValidate，并对单字段校验进行优化_小程序 valid 校验优化

在进行Web开发时，对表单进行校验的插件有许多，较为常用的有jQuery Validate。而在小程序开发中也有一款常用的插件：WxValidate.js。该插件是参考jQuery Validate封装的，为小程序提供一套常用的验证规则。

一、github地址

下载地址：GitHub - wux-weapp/wx-extend: 微信小程序 - 扩展插件（发送请求、Promise API、表单验证、Restful API）

二、参数说明

三、内置校验规则 

四、常用实例方法

五、具体实例

//验证字段的规则
const rules = {
    email: {
        required: true,
        email: true
    },
    phone: {
        required: true,
        tel: true
    },
    fax: {
        required: true,
        fax: true
    }
}
 
//验证字段的提示信息，若不传则调用默认的信息
const messages = {
    email: {
        required: "请输入邮箱",
        email: "请输入正确的邮箱"
    },
    phone: {
        required: "请输入手机号",
        tel: "请输入正确的手机号"
    },
    fax: {
        required: "请输入传真号码",
        fax: "请输入正确传真号码"
    }
}
 
Page({
    onLoad: function(){
        //创建实例
        this.WxValidate = new WxValidate(rules, messages);
 
        //自定义规则
        this.WxValidate.addMethod('fax', function(value, param){
            return WXvali.optional(value) || /^([0-9]{3,4})?[0-9]{7,8}$/.test(value);
        }, '请输入正确传真号码');
    },
    submitForm: function(e){
        const data = e.detail.value;
        //调用校验方法
        if(!this.WxValidate.checkForm(data)){
            const error = this.WxValidate.errorList[0];
            //提示错误信息
            wx.showToast({
                title: error.msg
            });
            return false;
        }
    }
});

六、对插件进行优化，支持单个字段校验

在实际开发中，偶尔会遇到对某个字段进行校验情况，但目前文档提供的函数只能校验全部，故在源码中稍作修改即可实现，在WxValidate.js源码中添加代码如下：

/**
 * 验证某个字段
 * @param {String} param 字段名
 * @param {Object} data 数据集
 */
checkField(param, data){
  this.__initData()
  this.setView(param)
  this.checkParam(param, this.rules[param], data)
  return this.valid()
}

调用实例：

Page({
    ...,
    submitForm: function(e){
        const data = e.detail.value;
        //这里以只校验phone字段为例
        if(!this.WxValidate.checkField('phone', data)){
            const error = this.WxValidate.errorList[0];
            //提示错误信息
            wx.showToast({
                title: error.msg
            });
            return false;
        }
    }
});

七、旧密码与新密码不等，新密码与再次密码相等

const rules = {
	oldpwd: { required: true },
	newPwd: { required: true, minlength: 6, maxlength: 20, unequalTo: "oldpwd" },
	aPwd: { required: true, minlength: 6, maxlength: 20, equalTo: "newPwd" }
}
 
const messages = {
	oldpwd: { required: "请输入原密码!" },
	newPwd: { required: "请输入新密码!", minlength: "最少要输入6个字符。", maxlength: "最多可以输入20个字符。", unequalTo: "新密码不能与旧密码相同" },
	aPwd: { required: "请再次输入新密码!", minlength: "最少要输入6个字符。", maxlength: "最多可以输入20个字符。", equalTo: "两次密码输入不一致" }
}
 
//实例对象
let WxVal = new WxValidate(rules, messages);
 
//1.WxValidate中有equalTo，则直接使用，rules中equalTo传入对比的字段即可，如aPwd中的equalTo。
 
//2.比较不同的校验规则WxValidate没有，这里可以自己添加不等的校验规则（新密码与旧密码不能相等）
WxVal.addMethod('unequalTo', function(value, param){
  return WxVal.optional(value) || WxVal.data[param]!=value;
}, '新密码不能与旧密码相同');

八、添加自定义规则

如果不想使用addMethod()方法添加校验规则，直接在WxValidate.js源码中__initDefaults方法和__initMethods方法中添加校验规则和提示信息即可。