技術標籤：微信小程式小程式javascriptes6

文章目錄

• 前言
• 一、WxValidate類的建構函式
• • 1、引數rules
  • 2、引數messages
  • 3、建立WxValidate類的例項
• 二、WxValidate的內建校驗規則
• 三、WxValidate的表單驗證方法
• 四、WxValidate類在小程式頁面中的部署
• 總結
• 關於作者

前言

微信小程式中的表單要進行驗證，可以使用第三方外掛：WxValidate.js。該外掛約有12.8KB左右，採用ES6中class類的方式進行編寫，所定義的類名為WxValidate，並最終將該類匯出。本文將詳細講解WxValidate.js外掛在微信小程式表單驗證中的使用方法。

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

總結

本文系統的講解了WxValidate.js的使用，該包的下載地址：

https://download.csdn.net/download/web_front_hai/13583475

大家在使用的時候要根據自身專案的實際情況，對本文中的程式碼進行必要的調整。只要跟著文章中的步驟一步一步的實際操作一遍，相信大家都可以順利而高效的完成微信小程式中表單元素的正確性驗證的。

關於作者

小海前端，具有18年Web專案開發和前後臺培訓經驗，在前端領域著有較為系統的培訓教材，對Vue.js、微信小程式開發、uniApp、React等全棧開發領域都有較為深的造詣。入住CSDN，希望能夠更多的結識Web開發領域的同仁，將Web開發大力的進行普及。同時也願意與大家進行深入的技術研討和商業合作。