async-validator详细用法

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)

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

validate方法

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

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

validator.validate({})

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
}

验证函数的参数：

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

规则的参数

属性	类型	说明
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位数字/字母/下划线组成' }
 ]
}