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

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

一、github地址

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

二、参数说明

参数	类型	描述
rules	object	验证字段的规则
messages	object	验证字段的提示信息

三、内置校验规则 

序号	规则	描述
1	required: true	这是一个必填字段
2	email: true	请输入有效的电子邮件地址
3	tel: true	请输入11位的手机号码
4	url: true	请输入有效的网址
5	date: true	请输入有效的日期
6	dateISO: true	请输入有效的日期（ISO），例如：2009-06-23, 1998/01/22
7	number: true	请输入有效的数字
8	digits: true	只能输入数字
9	idcard: true	请输入18位的有效身份证
10	equalTo: 'field'	输入值必须和field值相同
11	contains: 'ABC'	输入值必须包含ABC
12	minlength: 6	最少输入6个字符
13	maxlength: 18	最多可以输入18个字符
14	rangelength: [5, 10]	请输入长度在5和10之间的字符
15	min: 5	请输入不小于5的值
16	max: 10	请输入不小于10的数值
17	range: [5, 10]	请输入范围在5到10之间ov

四、常用实例方法

名称	返回类型	描述
checkForm(e)	boolean	验证所有字段的规则，返回验证是否通过
valid()	boolean	返回验证是否通过
size()	number	返回错误信息的个数
validationErrors()	array	返回所有错误信息
addMethod(name, method, message)	boolean	添加自定义验证方法

五、具体实例

//验证字段的规则
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方法中添加校验规则和提示信息即可。