async-validator表单验证1

前端开发中表单提交校验是一个很常见的功能;于是就仿照ElementUi写了一个表单验证的组件。本文就简单介绍一下 async-validator 的基本用法；下一篇介绍使用该库实现一个简单的有校验功能的 Form 组件。

安装

npm i async-validate

使用

1.amd方式引用 var schema = require('async-validate')
2 cmd方式引用 import AsyncValidator from 'async-validator'

AsyncValidator是一个构造函数；使用的时候需要我们传入规则验证器
formRules = {
username: [
    {
        required: true,
        type: string,
        message: '请填写用户名'
    },
    {
        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是一个验证器：定义规则，也可以自定义规则；
自定义规则：
Rules：function(rule, value, callback, source, options)

function test (rule, value, callback) {
let err
if (value === 'xxxx') {
       err = '不符合规范'
    }
   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 支持对数据异步校验，所以在编写自定义校验函数时，不管校验是否通过，校验函数中的 callback 都要调用。

文档其他默认配置：请移步 async-validator ;