一、WxValidate類的構(gòu)造函數(shù)
WxValidate類是整個(gè)插件中唯一的類，該類的構(gòu)造函數(shù)具備兩個(gè)參數(shù)：rules和messages。這兩個(gè)參數(shù)均是對(duì)象格式的數(shù)據(jù)。
1、參數(shù)rules
該參數(shù)用來(lái)指定表單元素在進(jìn)行正確性驗(yàn)證時(shí)應(yīng)該遵循的規(guī)則。這個(gè)規(guī)則采用的對(duì)象的形式進(jìn)行書(shū)寫(xiě)，其中表單元素在wxml文件中name屬性的取值為rules對(duì)象的屬性名，對(duì)應(yīng)的屬性值是使用多個(gè)規(guī)則組成的新對(duì)象。
例如：微信小程序的wxml文件中有一個(gè)用于輸入昵稱的文本框，要求該文本框必須輸入內(nèi)容，即不得為空，同時(shí)輸入的文本不得超過(guò)12位。wxml代碼如下所示。
<input type="text" placeholder="您的昵稱" name="nick"></input>
rules規(guī)則書(shū)寫(xiě)格式如下。
rules={ nick:{ required:true, // name屬性取值為nick的表單元素不得為空
maxlength:12 // 輸入的文本個(gè)數(shù)不得超過(guò)12位
}, // 其他表單元素的驗(yàn)證規(guī)則}2、參數(shù)messages
該參數(shù)用來(lái)指定表單元素在輸入時(shí)違反了rules指定的規(guī)則后給出的提示語(yǔ)。這個(gè)提示語(yǔ)也同樣采用對(duì)象的形式進(jìn)行書(shū)寫(xiě)。與rules格式相同，對(duì)象的屬性名時(shí)表單元素name屬性的取值，屬性值是由多個(gè)規(guī)則組成的新對(duì)象。
例如：根據(jù)rules規(guī)則的要求，我們?yōu)閚ick文本框“不得為空”和“最大不超過(guò)12個(gè)字符”這兩個(gè)規(guī)則設(shè)置違反規(guī)則時(shí)的提示語(yǔ)。
messages={
nick={ required:“您的昵稱不得為空”, // 違反“不得為空”時(shí)給出的提示語(yǔ)
maxlength:“昵稱最多輸入12個(gè)字符” // 違反“最大不超過(guò)12個(gè)字符”時(shí)給出的提示語(yǔ)
}
}3、創(chuàng)建WxValidate類的實(shí)例
有了rules和messages兩個(gè)參數(shù)，就可以創(chuàng)建WxValidate類的實(shí)例了。代碼如下所示。
let validate=new WxValidate(rules,messages);
二、WxValidate的內(nèi)置校驗(yàn)規(guī)則
WxValidate類為日常中常用的驗(yàn)證機(jī)制設(shè)置了內(nèi)置校驗(yàn)規(guī)則，這些規(guī)則都可以根據(jù)實(shí)際項(xiàng)目的需要書(shū)寫(xiě)在rules中，前面的required和maxlength都是它的內(nèi)置校驗(yàn)規(guī)則。
WxValidate.js中有關(guān)內(nèi)置校驗(yàn)規(guī)則的源代碼如下所示。
/**
* 初始化默認(rèn)提示信息
*/__initDefaults() { this.defaults = { messages: { required: '這是必填字段。', email: '請(qǐng)輸入有效的電子郵件地址。', tel: '請(qǐng)輸入11位的手機(jī)號(hào)碼。', url: '請(qǐng)輸入有效的網(wǎng)址。', date: '請(qǐng)輸入有效的日期。', dateISO: '請(qǐng)輸入有效的日期（ISO），例如：2009-06-23，1998/01/22。', number: '請(qǐng)輸入有效的數(shù)字。', digits: '只能輸入數(shù)字。', idcard: '請(qǐng)輸入18位的有效身份證。', equalTo: this.formatTpl('輸入值必須和 {0} 相同。'), contains: this.formatTpl('輸入值必須包含 {0}。'), minlength: this.formatTpl('最少要輸入 {0} 個(gè)字符。'), maxlength: this.formatTpl('最多可以輸入 {0} 個(gè)字符。'), rangelength: this.formatTpl('請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符。'), min: this.formatTpl('請(qǐng)輸入不小于 {0} 的數(shù)值。'), max: this.formatTpl('請(qǐng)輸入不大于 {0} 的數(shù)值。'), range: this.formatTpl('請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值。'),
}
}
}上述源代碼出現(xiàn)在WxValidate.js源文件的第35行至第60行。該部分代碼的功能是初始化默認(rèn)的提示信息，即設(shè)置違反同類規(guī)則時(shí)給出的默認(rèn)提示語(yǔ)。我們從上述代碼中可以側(cè)面獲取到該類提供的內(nèi)置校驗(yàn)規(guī)則，并使用在自己的表單驗(yàn)證上。
需要注意的時(shí)，在默認(rèn)提示信息中，不存在{0}和{1}的規(guī)則在rules對(duì)象中的取值均為邏輯值，即true或false。存在一個(gè){0}的取值為普通數(shù)據(jù)類型數(shù)據(jù)，例如：equalTo取值為字符串，contains取值為字符串，minlength和maxlength取值為數(shù)值，min和max取值為數(shù)值。同時(shí)存在{0}和{1}的取值為數(shù)組，數(shù)組中包括兩個(gè)數(shù)組元素，第一個(gè)數(shù)組元素與{0}相對(duì)應(yīng)，第二個(gè)數(shù)組元素與{1}相對(duì)應(yīng)，例如range取值為[5,10]，表示輸入的數(shù)據(jù)范圍必須在5到10之間。
三、WxValidate的表單驗(yàn)證方法
WxValidate類具備一個(gè)用于對(duì)表單進(jìn)行統(tǒng)一驗(yàn)證的方法：checkForm()，該方法的參數(shù)是一個(gè)對(duì)象，存儲(chǔ)了所有需要驗(yàn)證的表單元素的取值。其中對(duì)象的屬性名依然為表單元素name屬性的取值，屬性值是用戶在表單元素中輸入或選擇的最終結(jié)果。
該方法具備一個(gè)返回值，返回值的類型為邏輯值。若返回true，則表示所有的表單元素均通過(guò)了rules驗(yàn)證機(jī)制；若返回false，則表示有表單元素沒(méi)有通過(guò)對(duì)應(yīng)的rules驗(yàn)證機(jī)制。
checkForm()方法使用WxValidate類的實(shí)例調(diào)用，調(diào)用格式如下所示。
let result=validate.checkForm(event.detail.value); //這里event.detail.value是所有表單元素的取值`
若取值為false，則發(fā)生錯(cuò)誤的表單元素信息都存儲(chǔ)在validate.errorList數(shù)組中。該數(shù)組的數(shù)組元素是JSON數(shù)據(jù)，其中param屬性指定了發(fā)生錯(cuò)誤的表單元素的name屬性取值，msg屬性指定了校驗(yàn)錯(cuò)誤時(shí)給出的提示語(yǔ)，value屬性指定了此時(shí)表單元素的取值。如下圖所示。
根據(jù)上述內(nèi)容，我們可以將checkForm()方法的使用歸納為下列算法：
let result=validate.checkForm(event.detail.value);if(result){ // 所有的表單元素都通過(guò)了rules驗(yàn)證規(guī)則
// 調(diào)用后臺(tái)接口向服務(wù)器提交表單數(shù)據(jù)}else{ let msg=validate.errorList[0].msg; //獲取errorList數(shù)組中第一個(gè)驗(yàn)證錯(cuò)誤的提示信息
wx.showToast({ //使用wx.showToast() API將提示信息彈出給用戶
title: msg, icon:'none'
})
}四、WxValidate類在小程序頁(yè)面中的部署
1、將WxValidate.js復(fù)制到小程序的utils文件夾中。
2、在用到表單驗(yàn)證的頁(yè)面的js文件中導(dǎo)入WxValidate.js模塊。
import WxValidate from '…………(path)/utils/WxValidate.js';
3、設(shè)置validate全局變量，準(zhǔn)備存儲(chǔ)WxValidate類的實(shí)例。
let validate = null;
4、在小程序頁(yè)面的onLoad生命周期中創(chuàng)建rules和messages參數(shù)，并生成WxValidate類的實(shí)例。
onLoad(){ let rules={}; let message={};
validate=new WxValidate(ruels,message);
}5、在表單的bindsubmit事件中利用validate實(shí)例進(jìn)行驗(yàn)證：
// 表單的submit事件formSubmit(event){ let result=validate.checkForm(event.detail.value); if(result){ //調(diào)取接口提交數(shù)據(jù)
}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:'電話號(hào)碼不得為空',tel:'請(qǐng)?zhí)顚?xiě)有效地手機(jī)號(hào)碼'}, hourse:{required:'所在小區(qū)不得為空'}
};
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'
})
}
}
})