async-validator 表单校验 从0到1

aysnc-validator是对async-validate的二次封装库，用于对象值的校验。

使用例子

import type { Rules } from 'async-validator'
import Schema from 'async-validator'


const source = {
  name: 'xxx',
  age: 0,
}


// 定义校验规则
const rules: Rules = {
  name: {
    // 使用预设类型校验规则
    type: 'string',
    // 必填
    required: true
  },
  age: {
    type: 'number',
  }
}


// 创建校验对象
const validator = new Schema(rules)


// 调用校验
validator.validate(source, (errors, fields) => {


  if(errors){
    console.error(errors)
    console.error(fields)
  }
  console.log('success')
})

validate 校验函数

接收参数：

• source 被校验数据

• options（可选）执行属性

  • suppressWarning 是否开启内部的错误提醒， true: 关闭, false: 开启
  • first 遇到校验失败后，是否继续校验
  • firstFields 对于有多条校验规则的字段，遇到校验失败后，是否继续校验

• callback (可选) 校验回调

调用方式

• 回调

validator.validate(source, (errors, fields) => {
   // errors 列表形式错误
   // fields 字段形式错误
})

• 异步

validator.validate(source).then(() => {}).catch((err) => {
  const { errors, fields } = err
})

规则设置

配置模式

const rules = {
  // 单条规则
  name: { type:'string' },
  // 多条规则
  id: [
    { required: true },
    { type: 'string' }
  ]
}

函数模式

const rules = {
  name(rule, value, callback, source, options){
     if(value.length < 10){
         callback('名称长度不足') 
      }
    }
}

可配置属性

{
  type?: Type  预设值类型校验规则
  required?: boolean 是否必填
  pattern?: RegExp 属性 type: 'pattern', 对应的正则校验规则
  enum?: array 属性 type: 'enum', 校验值是否在属性enum内
  max?: number  字符或数组的最大长度
  min?: number 字符或数组的最小长度
  len?: number  属性length大小, 优先级高于max, min
  fields?: rules 多层校验, 需要校验对象内具体属性时，可以通过 fields 实现规则嵌套
  messages?: string | () => string 错误提示
  transform?: function(value) 校验前的转换函数
  asyncValidator?: function 自定义异步校验
  validator?: function 自定义同步校验
}

type 可选的预设校验类型

• string 字符
• number 数字
• boolean 布尔
• method 函数
• regexp 正则表达式
• integer 正整数
• float 小数
• array 数组
• object 对象
• enum 枚举，值必须包含在属性 enum 内
• date 日期
• url 链接
• hex 十六进制
• email 邮箱
• any 任意类型
• pattern 正则模式，值必须通过属性pattern 正则校验

配置例子

// 枚举
{
  type: 'enum',
  enum: [0, false, 'string'], // 枚举值不能为 null
}


// 范围
{
  type: 'string',
  max: 30,
  min: 1
}


// 正则匹配
{
  type: 'pattern',
  pattern: /^[a-z]+$/
}


// 多层嵌套
// data = { child: {id: 'xx', name: 'xxx'}, ... }
{
  type: 'object',
  fields: {
    id: { type: 'string' },
    name: { type: 'string' }
  }
} 


// 转换
{
  type: 'string',
  transform(value){
    return value.trim()
  }
  
  // 自定义同步校验
  {
     validator(rule, value, callback){
       if(value.length < 10){
          callback('错误信息')
      }
      callback()
    } 
  }


// 自定义异步校验
{
   asyncValidator(rule: any, value: any, callback) {
        setTimeout(() => {
          callback('xxx')
        }, 1000)
    },
}

静态方法，属性

register 注册校验方法

import Schema from 'async-validator'
 
// 如果使用ts, 注册的校验函数是没有类型提示的。
// 校验函数的参数与自定义校验函数一致, 可为异步函数
Schema.register('null', (rule: object, value: any, callback: Function) => {
  if(value === null){
    callback()
  }
  
  callback('值必须为null')
})
const source = {
  value: null
}


const rules: Rules = {
  value: {
    // type 无法识别注册类型
    type: 'null' as any,
    required: true
  }
}
// 注册后的方法可在 Schema.validators 查到

• validators 已注册的预设校验方法

{
  string: [Function: string],
  method: [Function: method],
  number: [Function: number],
  boolean: [Function: _boolean],
  regexp: [Function: regexp],
  integer: [Function: integer],
  float: [Function: floatFn],
  array: [Function: array],
  object: [Function: object],
  enum: [Function: enumerable],
  pattern: [Function: pattern],
  date: [Function: date],
  url: [Function: type],
  hex: [Function: type],
  email: [Function: type],
  required: [Function: required],
  any: [Function: any],
}

• messages
• warning