前端開發(fā)中表單提交校驗是一個很常見的功能;于是就仿照ElementUi寫了一個表單驗證的組件。本文就簡單介紹一下 async-validator 的基本用法；下一篇介紹使用該庫實現(xiàn)一個簡單的有校驗功能的 Form 組件。
安裝
npm i async-validate
使用
1.amd方式引用 var schema = require('async-validate')
2 cmd方式引用 import AsyncValidator from 'async-validator'
AsyncValidator是一個構(gòu)造函數(shù)；使用的時候需要我們傳入規(guī)則驗證器
formRules = {
username: [
? ? {
? ? ? ? required: true,
? ? ? ? type: string,
? ? ? ? message: '請?zhí)顚懹脩裘?
? ? },
? ? {
? ? ? ? min: 3,
? ? ? ? max: 10,
? ? ? ? message: '用戶名長度為3-10'
? ? }
? ]
}
const validator = new AsyncValidator(formRules)
validator. validate({username:''},[options], (errors, fields) => {
? ? if(errors) {
? ? ? ? return handleErrors(errors, fields);
? ? }
// validation passed
})
formRules是一個驗證器：定義規(guī)則，也可以自定義規(guī)則；
自定義規(guī)則：
Rules：function(rule, value, callback, source, options)
function test (rule, value, callback) {
let err
if (value === 'xxxx') {
? ?? ? err = '不符合規(guī)范'
? ? }
? ?callback(err)
}
const validateData = {
? ?complex: [
? ?? ? {
? ?? ? validator: test
? ? ? ?}
? ?]
}
const validator = new AsyncValidator(validateData)
validate
function(source, [options], callback)
- source: 驗證的對象.
- options: An object describing processing options for the validation (optional).
- callback: A callback function to invoke when validation completes (required).
async-validator 支持對數(shù)據(jù)異步校驗，所以在編寫自定義校驗函數(shù)時，不管校驗是否通過，校驗函數(shù)中的 callback 都要調(diào)用。
