微信小程式：miniprogram-validator進行表單校驗

miniprogram-validator

基于

WxValidate - 表單驗證

擴充的微信小程式表單驗證器,規則配置可參考其文檔。

配置規則格式參考 ElementUI 使用的

async-validator

（僅參考其格式）

表單校驗的方案：

• 後端校驗：無論前端是否校驗，資料入庫前都需要進行校驗
• 前端校驗：如果需要提升使用者體驗或者減少請求次數的情況下，前端需要資料校驗。如果應用的要求不高，可以免去前端校驗

使用示例

将兩個檔案拷貝到檔案夾下

libs/
    validator.js
    WxValidate.js      

const Validator = require('./validator.js');

// 需要校驗的資料
let data = {
  name: 'Tom',
  age: 10,
  school: 'A',
};

// 校驗規則 {field: rules}
let rules = {
  name: [{ message: '姓名不能為空', required: true }],
  age: [
    { message: '年齡不能為空', required: true },
    { message: '年齡不能大于10', max: 10 },
  ],
  school: [
    {
      message: '學校隻能是A/B',
      validator: (value, param) => {
        return !value || (value && ['A', 'B'].includes(value));
      },
    },
  ],
};

let validator = new Validator(rules);
let error = validator.validate(data);

if (error) {
  console.log('校驗出錯');
  console.log(error);
} else {
  console.log('校驗通過');
}      

完整代碼：

https://github.com/mouday/miniprogram-validator