微信小程序之表單驗證rule

表單驗證是javascript中的高級選項之一。JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證  [1]  。

被 JavaScript 驗證的這些典型的 表單數據有：

用戶是否已填寫表單中的必填項目？

用戶輸入的郵件地址是否合法？

用戶是否已輸入合法的 日期？

用戶是否在數據域(numeric field) 中輸入了文本？

用大白話說 可以舉例類似 ，我們在一個網站的注冊頁面，填寫一些相關信息，這時候 點擊提交的時候，如果我們有些“必填”信息沒有輸入，網站就會給出相應的提示，比如：密碼不能為空，已填入信息的正確性、身份證格式、手機格式錯誤等等。此類驗證我們都統稱為表單驗證，那我們今天看看 在小程序中，我們如何可以更方便的處理類似的表單驗證呢？

 

我們以注冊場景為例，看看 本篇內容要實現什么效果：

 

以上就是我們實現后的表單驗證效果。那我們一起來是如何實現的吧～

1|2代碼實現

 

 插件介紹

首先我們需要用到一個 WxValidate - 表單驗證的js插件。我們一起來看看它里面包含什么內容：

在小程序中使用

 看了上面的插件介紹，是不是還是一頭霧水呢？不要急，下面，我們就來一起看看上面的驗證效果配合插件是如何實現的吧。

①，我們需要引入WxValidate.js，可以直接復制如下js代碼塊：

 

②在我們要驗證的頁面js中導入js，並在data中增加form子元素

//導入驗證js
import WxValidate from "../../utils/WxValidate";

data: {
    form: {//增加form子元素
      items: [
        { name: '1', value: '男', checked: 'true' },
        { name: '2', value: '女' }
      ],
      date: '請選擇出生年月',
      casArray: ['身份證', '護照', '其他/港澳台居民身份證', '外國人永久居留身份證'],
    }
  },

③初始化表單驗證規則，我一般寫在onLoad中

onLoad: function () {
    this.initValidate();
},

initValidate() {
    let rules = {
      Name: {
        required: true,
        maxlength: 10
      },
      sex: {
        required: true,
        number: true
      }
      ,
      birthDate: {
        required: true,
        dateISO: true,
      }, 
      Card: {
        required: false,
        idcard: true
      }
    }

    let message = {
      Name: {
        required: '請輸入姓名',
        maxlength: '名字不能超過10個字'
      },
      Card: {
        idcard: "請輸入正確的身份證號碼"
      },
      sex: {
        required: "請選擇您的性別",
        number: '請您選擇您的性別'
      }
      ,
      birthDate: {
        required: "請選擇出生年月",
        dateISO: "請選擇出生年月",
      },
    }
    //實例化當前的驗證規則和提示消息
    this.WxValidate = new WxValidate(rules, message);
  }

④最后在表單提交方法中調用驗證方法就行了

formSubmit: function (e) {
 let params = e.detail.value;
 if (!this.WxValidate.checkForm(params)) {
  //表單元素驗證不通過，此處給出相應提示
    let error = this.WxValidate.errorList[0];
    switch (error.param) {
        case "Name":
          //TODO
          break;
        case "sex":
         //TODO
          break;
        case "birthDate":
         //TODO
          break;
        case "Card":
         //TODO
          break;

      }
  }
 return false;
}
//驗證通過，往下執行

原網址：https://www.cnblogs.com/zhangxiaoyong/p/10166951.html