aysnc-validator

copy_left

发布于 2022-04-02 08:02:15

3110

发布于 2022-04-02 08:02:15

文章被收录于专栏：方球

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)
    },
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022.03.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

callback