aysnc-validator

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

使用例子

代码语言：javascript复制

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 (可选) 校验回调

调用方式

• 回调

代码语言：javascript复制

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

• 异步

代码语言：javascript复制

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

规则设置

配置模式

代码语言：javascript复制

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

函数模式

代码语言：javascript复制

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

可配置属性

代码语言：javascript复制

{
  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 正则校验

配置例子

代码语言：javascript复制

// 枚举
{
  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)
    },
}

callback object regexp string url

0 人点赞