微信小程序 WeUI form 表單驗證

背景

因爲公司項目需要，最近在調研微信小程序。小程序不僅提供了豐富的組件幫程序員快速構建app，而且還提供了一套微信風格的UI組件庫 WeUI。
Form 表單數據驗證是常用的場景之一。現在小程序中實現 form 表單驗證有以下兩種途徑：

1. WxValidate - 表單驗證
2. WeUI form - 本身提供的表單驗證

因本人想用 WeUI，所以嘗試採用第2種方式。但發現使用過程中各種坑。

WeUI form 表單驗證問題

以 WeUI form 官方提供的表單驗證 demo 爲例，存在以下問題：

• 內置規則 required 無法判斷空數組的情況。 即無法驗證複選框選擇狀態；
• 當給一個 field 配置多條 rule，第一條 rule 驗證失敗，還會再驗證第二條 rule，不符合邏輯。 如對於 mobile，不填如何數據，提示的錯誤信息還是 “mobile 格式不對”，應該提示 “mobile 必填”；
• 當表單驗證失敗時，返回的錯誤信息不一定包含所有的驗證失敗的 field 的錯誤信息。 如，挨個填寫 qq 號，手機號等，每次都點擊"確定" 進行驗證，但應該顯示的錯誤信息時有時無。
• 內置的規則除 required 外，都是必填。 即，如果想 mobile 選填，不添加 required 規則，只添加 mobile 規則。當不輸入電話號碼時，還會提示 “mobile 格式錯誤”；
• 驗證規則無啓用禁用狀態。 即，如果 {required: false}，還是會識別爲必填；

解決方案

我選擇了改源碼的方案。下載了 WeUI 組件庫以後，對 form/form.js 進行了修改。

下載我修改後的 form.js 並替換到本地後，表單驗證即可正常使用。

添加自定義 validator

附上給 form 添加自定義 validator 的使用示例：

在 weui-form-validator.js 定義針對 WeUI form 的 validator

// qq 驗證規則
module.exports = {
  qq(rule, value, param, models) {
  	// 此處判斷 value 有值且 qq號規則驗證失敗，則返回配置的錯誤信息 message
    if(!Rules.isOptional(value) && !Rules.qq(value)){
      return rule.message;
    }
  }
}

在具體的頁面 pages/form/form.js 引入qq驗證規則

// 此處 qq: true 爲驗證規則佔位。當設置了 qq:false，則禁用此項驗證。
{
      name: 'qq',
      rules: [{ required: true, message: 'qq必填' }, { qq: true, validator: FormValidator.qq, message: '請輸入有效的qq號' }],
}