一、WxValidate類的構(gòu)造函數(shù)

WxValidate類是整個插件中唯一的類，該類的構(gòu)造函數(shù)具備兩個參數(shù)：rules和messages。這兩個參數(shù)均是對象格式的數(shù)據(jù)。

1、參數(shù)rules

該參數(shù)用來指定表單元素在進行正確性驗證時應(yīng)該遵循的規(guī)則。這個規(guī)則采用的對象的形式進行書寫，其中表單元素在wxml文件中name屬性的取值為rules對象的屬性名，對應(yīng)的屬性值是使用多個規(guī)則組成的新對象。

例如：微信小程序的wxml文件中有一個用于輸入昵稱的文本框，要求該文本框必須輸入內(nèi)容，即不得為空，同時輸入的文本不得超過12位。wxml代碼如下所示。

<input type="text" placeholder="您的昵稱" name="nick"></input>

rules規(guī)則書寫格式如下。

rules={  nick:{    required:true,        // name屬性取值為nick的表單元素不得為空
    maxlength:12          // 輸入的文本個數(shù)不得超過12位
  },  // 其他表單元素的驗證規(guī)則}

2、參數(shù)messages

該參數(shù)用來指定表單元素在輸入時違反了rules指定的規(guī)則后給出的提示語。這個提示語也同樣采用對象的形式進行書寫。與rules格式相同，對象的屬性名時表單元素name屬性的取值，屬性值是由多個規(guī)則組成的新對象。

例如：根據(jù)rules規(guī)則的要求，我們?yōu)閚ick文本框“不得為空”和“最大不超過12個字符”這兩個規(guī)則設(shè)置違反規(guī)則時的提示語。

messages={
  nick={     required:“您的昵稱不得為空”,            // 違反“不得為空”時給出的提示語
     maxlength:“昵稱最多輸入12個字符”        // 違反“最大不超過12個字符”時給出的提示語
  }
}

3、創(chuàng)建WxValidate類的實例

有了rules和messages兩個參數(shù)，就可以創(chuàng)建WxValidate類的實例了。代碼如下所示。

let validate=new WxValidate(rules,messages);

二、WxValidate的內(nèi)置校驗規(guī)則

WxValidate類為日常中常用的驗證機制設(shè)置了內(nèi)置校驗規(guī)則，這些規(guī)則都可以根據(jù)實際項目的需要書寫在rules中，前面的required和maxlength都是它的內(nèi)置校驗規(guī)則。

WxValidate.js中有關(guān)內(nèi)置校驗規(guī)則的源代碼如下所示。

/**
 * 初始化默認(rèn)提示信息
 */__initDefaults() {  this.defaults = {    messages: {      required: '這是必填字段。',      email: '請輸入有效的電子郵件地址。',      tel: '請輸入11位的手機號碼。',      url: '請輸入有效的網(wǎng)址。',      date: '請輸入有效的日期。',      dateISO: '請輸入有效的日期（ISO），例如：2009-06-23，1998/01/22。',      number: '請輸入有效的數(shù)字。',      digits: '只能輸入數(shù)字。',      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} 的數(shù)值。'),      max: this.formatTpl('請輸入不大于 {0} 的數(shù)值。'),      range: this.formatTpl('請輸入范圍在 {0} 到 {1} 之間的數(shù)值。'),
    }
  }
}

上述源代碼出現(xiàn)在WxValidate.js源文件的第35行至第60行。該部分代碼的功能是初始化默認(rèn)的提示信息，即設(shè)置違反同類規(guī)則時給出的默認(rèn)提示語。我們從上述代碼中可以側(cè)面獲取到該類提供的內(nèi)置校驗規(guī)則，并使用在自己的表單驗證上。

需要注意的時，在默認(rèn)提示信息中，不存在{0}和{1}的規(guī)則在rules對象中的取值均為邏輯值，即true或false。存在一個{0}的取值為普通數(shù)據(jù)類型數(shù)據(jù)，例如：equalTo取值為字符串，contains取值為字符串，minlength和maxlength取值為數(shù)值，min和max取值為數(shù)值。同時存在{0}和{1}的取值為數(shù)組，數(shù)組中包括兩個數(shù)組元素，第一個數(shù)組元素與{0}相對應(yīng)，第二個數(shù)組元素與{1}相對應(yīng)，例如range取值為[5,10]，表示輸入的數(shù)據(jù)范圍必須在5到10之間。

三、WxValidate的表單驗證方法

WxValidate類具備一個用于對表單進行統(tǒng)一驗證的方法：checkForm()，該方法的參數(shù)是一個對象，存儲了所有需要驗證的表單元素的取值。其中對象的屬性名依然為表單元素name屬性的取值，屬性值是用戶在表單元素中輸入或選擇的最終結(jié)果。

該方法具備一個返回值，返回值的類型為邏輯值。若返回true，則表示所有的表單元素均通過了rules驗證機制；若返回false，則表示有表單元素沒有通過對應(yīng)的rules驗證機制。

checkForm()方法使用WxValidate類的實例調(diào)用，調(diào)用格式如下所示。

let result=validate.checkForm(event.detail.value);   //這里event.detail.value是所有表單元素的取值`

若取值為false，則發(fā)生錯誤的表單元素信息都存儲在validate.errorList數(shù)組中。該數(shù)組的數(shù)組元素是JSON數(shù)據(jù)，其中param屬性指定了發(fā)生錯誤的表單元素的name屬性取值，msg屬性指定了校驗錯誤時給出的提示語，value屬性指定了此時表單元素的取值。如下圖所示。

根據(jù)上述內(nèi)容，我們可以將checkForm()方法的使用歸納為下列算法：

let result=validate.checkForm(event.detail.value);if(result){   // 所有的表單元素都通過了rules驗證規(guī)則
   // 調(diào)用后臺接口向服務(wù)器提交表單數(shù)據(jù)}else{   let msg=validate.errorList[0].msg;      //獲取errorList數(shù)組中第一個驗證錯誤的提示信息
   wx.showToast({                          //使用wx.showToast() API將提示信息彈出給用戶
      title: msg,      icon:'none'
   })
}

四、WxValidate類在小程序頁面中的部署

1、將WxValidate.js復(fù)制到小程序的utils文件夾中。

2、在用到表單驗證的頁面的js文件中導(dǎo)入WxValidate.js模塊。

import WxValidate from '…………(path)/utils/WxValidate.js';

3、設(shè)置validate全局變量，準(zhǔn)備存儲WxValidate類的實例。

let validate = null;

4、在小程序頁面的onLoad生命周期中創(chuàng)建rules和messages參數(shù)，并生成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){       //調(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:'電話號碼不得為空',tel:'請?zhí)顚懹行У厥謾C號碼'},      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'
      })
    }
  }
})