专注app软件定制开发async-validator详细用法

sync-专注app软件定制开发是一个表单的异步验证专注app软件定制开发的第三方库。

npm i async-validator
1

import Schema from 'async-validator'const descriptor = {  userName: { type: 'string',required: true },  pass: { type: 'string',required: true }}const validator = new Schema(descriptor)
1
2
3
4
5
6
7

专注app软件定制开发传入验证规则对象，专注app软件定制开发可以新建一个验证器对象。

validate方法

专注app软件定制开发验证器对象的validate方法用于验证数据是否符合验证规则。

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

validator.validate({})
1

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

参数：

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

options的配置

{  suppressWarning: false, // 是否禁止无效值的内部警告  first: false, // 是否在第一个规则验证错误时调用回调，不再处理其他验证规则  firstFields: true // 是否在指定字段的第一个规则验证错误时调用回调，不再处理相同字段的验证规则，true代表所有字段}
1
2
3
4
5

validator.validate({}, (errors, fields) => {  if (errors) {    console.log('验证不通过', errors, fields)    return  }  console.log('验证通过')})
1
2
3
4
5
6
7

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

validator.validate({})  .then(() => {    console.log('验证通过')  })  .catch(({ errors, fields }) => {  console.log('验证不通过', errors, fields)})
1
2
3
4
5
6
7

定义验证规则

const descriptor = {  userName: { type: 'string',required: true },  pass: { type: 'string',required: true }}
1
2
3
4

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

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

验证函数的参数：

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

规则的参数

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}$/ }}
1
2
3

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 }}
1
2
3
4
5

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

len属性

const descriptor = {   userName: { type: 'string', len: 6},   age: { type: 'integer', len: 6},   role: { type: 'array', len: 6 } }
1
2
3
4
5

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

enum属性

const descriptor = { role: { type: "enum", enum: ['admin', 'user', 'guest'] }}
1
2
3

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

whitespace属性

const descriptor = {   userName: { type: 'string', required: true},   pass: { type: 'string', required: true, whitespace: true } }
1
2
3
4

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

transform属性

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

const descriptor = {  userName: {   	type: 'string',   	required: true,   	transform (value) {      return value.trim()   }}
1
2
3
4
5
6
7
8

defaultField属性

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

var descriptor = {   urls: {     type: "array",      required: true,     defaultField: {type: "url"}   } }
1
2
3
4
5
6
7

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}	 }  }}
1
2
3
4
5
6
7
8
9
10
11
12

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()            }          }        }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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))       })     }   } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

message属性

const descriptor = {  userName: [   { required: true, message: '用户名必填' },   { required: true, pattern:/^\w{6,20}$/,message: '用户名必须由6-20位数字/字母/下划线组成' } ]}
1
2
3
4
5
6