有意思的異步校驗async-validator

async-validator 是個純 js 庫，能夠對數據進行異步校驗。async-validator 是基於早期的 async-validate 進行修改的，可是早期出現的 async-validate 並無獲得更多的人使用，反而基於它作了修改的 async-validator 引發不少人的關注並使用，目前 star 數在 5.2K 左右，對於表單驗證可謂是至關的好用。一直好奇 ant.design 中 Form 的表單檢驗是怎麼作的。而後抱着學習的態度去 github 上找了下，而後發現了它，這個做者也是優秀的嘞。

ant.design form 使用了 rc-form 封裝了 Form 組件，而 rc-form 中使用了 async-validator 插件對錶單進行的校驗。 element-ui 中也是使用了 async-validator 作的表單驗證。

import schema from 'async-validator';

let descriptor = {
    name: {
        type: "string",
        required: true,
        validator: (rule, value) => value === 'muji',
    },
    age: {
        type: "number",
        asyncValidator: (rule, value) => {
            return new Promise((resolve, reject) => {
                if (value < 18) {
                    reject("too young");  // reject with error message
                } else {
                    resolve();
                }
            });
        }
    },
    address: {
        validator(rule, value, callback){
            return value === 'test';
        },
        message: 'Value is not equal to "test".',
    }
};
let validator = new schema(descriptor);
validator.validate({name: "muji"}, (errors, fields) => {
    if(errors) {
        // validation failed, errors is an array of all errors
        // fields is an object keyed by field name with an array of
        // errors per field
        return handleErrors(errors, fields);
    }
    // validation passed
});

// PROMISE USAGE
validator.validate({ name: "muji", age: 16 }).then(() => {
    // validation passed or without error message
}).catch(({ errors, fields }) => {
    return handleErrors(errors, fields);
})
複製代碼

• 必填 required

表示該字段是否必填

• 空格 whitespace

表示輸入的字符串前面是否容許出現多個(一個以上)連續的空格

• 類型 type

  表示容許該字段接收值的類型

  • integer -- 整形
  • float -- 浮點型
  • array -- 數組
  • regexp -- 正則表達式
  • object -- 對象
  • method -- 函數 function
  • email -- 郵箱
  • number -- 數字
  • date -- 日期 new Date()
  • url -- 網址
  • hex -- 十六進制數

• 區間 range

  表示該字段接受值的長度，容許的最小最大數值區間

  • length -- 固定長度
  • min -- 最小值
  • max -- 最大值
  • range -- [最小值, 最大值]

• 枚舉 enum

枚舉容許該字段的值，至少符合其中一個

• 正則 pattern

經過正則表達式匹配該字段接收值是否符合要求