sync-validator是一个表单的异步验证的第三方库。
官方文档

npm i async-validator
import Schema from 'async-validator'

const descriptor = {
  userName: { type: 'string',required: true },
  pass: { type: 'string',required: true }
}
const validator = new Schema(descriptor)

传入验证规则对象，可以新建一个验证器对象。

async 方法中useState state未更新_typescript

validate方法

验证器对象的validate方法用于验证数据是否符合验证规则。

如验证一个空对象，是否符合验证规则

validator.validate({})

async 方法中useState state未更新_typescript_02

function(source, [options], callback): Promise

参数：

  • source 要验证的对象（必选)
  • [options] 验证处理选项对象（可选）
  • callback 验证完成时调用的回调函数（可选）

options的配置

{
  suppressWarning: false, // 是否禁止无效值的内部警告
  first: false, // 是否在第一个规则验证错误时调用回调，不再处理其他验证规则
  firstFields: true // 是否在指定字段的第一个规则验证错误时调用回调，不再处理相同字段的验证规则，true代表所有字段
}
validator.validate({}, (errors, fields) => {
  if (errors) {
    console.log('验证不通过', errors, fields)
    return
  }
  console.log('验证通过')
})

返回值：
validate方法返回一个promise对象,可以用then方法和catch方法绑定成功或失败的处理

validator.validate({})
  .then(() => {
    console.log('验证通过')
  })
  .catch(({ errors, fields }) => {
  console.log('验证不通过', errors, fields)
})

定义验证规则

const descriptor = {
  userName: { type: 'string',required: true },
  pass: { type: 'string',required: true }
}

验证规则是一个对象，属性名是字段，属性值是字段的验证规则，规则可以是对象，也可以是函数或数组。
规则为函数：

pass: (rule, value, callback, source, options) => {
  const errors = []
  if (value === undefined || !value.length) {
    errors.push(`${rule.field}必填`)
  }
  return errors
}

验证函数的参数：

async 方法中useState state未更新_数组_03

规则为数组，可以为单个字段设置多个验证规则。

规则的参数

属性

类型

说明

type

String

用于验证数据类型，默认类型为’string’

required

boolean

是否必填

pattern

regexp/string

字段值匹配正则表达式才能通过验证

min和max

number

对于字符串和数组类型，将根据长度进行比较，对于数字类型，数字不得小于min，也不得大于max

len

number

对于字符串和数组类型，对length属性执行比较，对于数字类型，此属性指示数字的完全匹配，len属性与min和max属性组合，则len优先。

enum

array

type必须设置为enum，值必须包含在从可能值列表中才能通过验证

whitespace

boolean

type必须设置为string，要为仅包含空格的字符串可以将whitespace设置为true

transform

function

在验证之前转换值

defaultField

array/object

type为数组或对象类型时一起使用，用来验证数组或对象中包含的所有值，进行深层验证

fields

object

type为数组或对象类型时一起使用，分别验证array/object类型的数据中的值，实现深度验证

validator

function

验证器，可以为指定字段自定义验证函数：function(rule, value, callback)

asyncValidator

function

异步验证器，可以为指定字段自定义异步验证函数 function(rule, value, callback)

message

string/jsx/function等

根据需要将消息分配给规则

1、type属性

type属性用来验证数据类型，async-validator中能够验证的类型包括：

  • string: 值必须是 String 类型。
  • number: 值必须是 Number 类型。
  • boolean: 值必须是 Boolean 类型。
  • method: 必须是 Function 类型。
  • regexp: 必须是 RegExp 的实例或在创建新 RegExp 时不生成异常的字符串。
  • integer: 必须是 Number 和整数类型。
  • float: 必须是 Number 和浮点数类型。
  • array: 必须是由array.isarray确定的数组。
  • object: 必须是 Object 类型，而不是Array.IsArray类型。
  • enum: 值必须存在于枚举中。
  • date: 必须是 Date 类型。
  • url: 必须是url类型。
  • hex: 必须是十六进制类型。
  • email: 必须是电子邮件类型。
  • any: 可以是任何类型
pattern属性
const descriptor = {
  pass: { required: true, pattern:/^\w{6,20}$/ }
}
min和max属性
const descriptor = {
  userName: { type: 'string', min: 6, max: 20 },
  role: { type: 'array', min: 1, max: 3 },
  age: { type: 'integer', min: 18, max: 60 }
}

PS:对于字符串和数组类型，长度lenth不小于min且不得大于max，对于数字类型，值不小于min且不得大于max

len属性
const descriptor = {
   userName: { type: 'string', len: 6},
   age: { type: 'integer', len: 6},
   role: { type: 'array', len: 6 }
 }

PS:对于字符串和数组类型，要求长度lenth等于len，对于数字类型，要求值等于len

enum属性
const descriptor = {
 role: { type: "enum", enum: ['admin', 'user', 'guest'] }
}

PS:type必须设置为enum，值必须包含在从可能值数组中才能通过验证

whitespace属性
const descriptor = {
   userName: { type: 'string', required: true},
   pass: { type: 'string', required: true, whitespace: true }
 }

PS: 以上在userName和pass都只包含空格的情况下userName可以通过验证，pass不能通过验证。

transform属性

用于在验证之前进行值转换

const descriptor = {
  userName: {
   	type: 'string',
   	required: true,
   	transform (value) {
      return value.trim()
   }
}
defaultField属性

验证array/object类型的数据中包含的所有值 实现深度验证

var descriptor = {
   urls: {
     type: "array", 
     required: true,
     defaultField: {type: "url"}
   }
 }
fields属性

用于分别验证array/object类型的数据中的值，实现深度验证

const descriptor = {
   demo: {
	 type: "array", 
	 required: true, 
	 len: 3,
	 fields: {
	 	0: {type: "string", required: true},
	 	1: {type: "number", required: true},
	 	2: {type: "url", required: true}
	 }
  }
}
validator属性

用于为指定字段自定义验证函数：function(rule, value, callback)
如验证一个数组中至少要包含一个元素，第二个元素不能小于第一个元素。

const descriptor = {
	ageRange:{
          validator (rule, value, callback) {
            const _value = _.compact(value) // 使用loash过滤掉假值
            if (!_value.length) {
              callback(rule.field + '至少要包含一个数据')
            } else if (_value[0] - _value[1] > 0) {
              callback(rule.field + '结束值不能小于初始值')
            } else {
              callback()
            }
          }
        }
}
asyncValidator属性

用于为指定字段自定义异步验证函数 function(rule, value, callback)
如本例中验证用户名是否存在

const descriptor = {
   userName: {
     asyncValidator (rule, value, callback) {
       axios({
         url: '/users',
         params: { userName: value }
       }).then((data) => {
         callback()
       }, (error) => {
         callback(new Error(error))
       })
     }
   }
 }
message属性
const descriptor = {
  userName: [
   { required: true, message: '用户名必填' },
   { required: true, pattern:/^\w{6,20}$/,message: '用户名必须由6-20位数字/字母/下划线组成' }
 ]
}