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