项目随笔之async-validator

async-validator是一个表单异步校验库,Ant-design和Element组件库中的表单使用的都是asgnc-validator,不仅支持js,同时还支持ts,是个功能超级强大的库.官网地址
安装

npm i async-validator

使用
基本用法包括定义一个descriptor，将其分配给schema，并将要验证的对象和回调函数传递给schema创建出来的validator的validate方法

// 引入异步
import Schema from 'async-validator'
// 定义规则描述
const des = {
 name: {
  type: "string",
  required: true,
  message: "内容不能为空"
 }
}
// 创建校验器
const validator = new Schema(des)
// 添加校验
validator.validate({ name: "值" }, (errors, field) => {
 if(errors){
  return new Error(`校验失败`)
 }
 // 校验失败
})

vue3+Ant-design组件中使用实例:

<template>
 <div>
  <a-form style="width: 80%; margin: 0 auto;" :model="formData">
   <div>
     用户名：
     <a-input type="text" @blur="check" v-model:value="formData.username"></a-input>
   </div>
   <div>
    密码：
    <a-input type="passsword" v-model:value="formData.password"></a-input>
   </div>
   <a-button type="primary">提交</a-button>
  </a-form>
 </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted } from 'vue'
import Schema from 'async-validator'
interface IFormData {
 username: string
 password: string
}
export default defineComponent({
 setup() {
  const formData = reactive<IFormData>({
   username: '',
   password: '',
 })
 const des = {
  username: [
   {
    type: 'string',
    required: true,
    validator(rule, value) {
     return value != ''
    }
    message: '用户名不能为空',
   },
   {
     type: 'string',
     min: 6,
     max: 10,
     validator(rule, value) {
       return rule.min < value.length && value.length < rule.max
      },
      message: '长度 6-8',
     },
    ],
  }
  const validator = new Schema(des)
  function check() {
   // 开始校验
   validator.validate({ username: formData.username }, (errors, fields) => {
    if (errors) {
     return new Error(`不符合规则`)
    }
    console.log('校验成功')
   }).then((res) => {
    console.log('res--->', res)
    })
  }
  return {
   formData,
   changeName,
  }
 }
})
</script>

promise使用案例:

// 引入异步
import Schema from 'async-validator'
// 定义规则描述
const des = {
 name: {
  type: "string",
  required: true,
  message: "内容不能为空",
  asyncValidator: (rule,value) => {
   // @rule 获取到是此处限制规则
   // @value 获取到属性 name 的值
   return new Promise((resolve,reject) => {
    setTimeout(()=>{ // 使用定时器模拟异步操作
    if(value != ""){
     resolve() //成功
    }else{
     reject("校验失败")
    }
    },2000)
   })
  }
 }
}
// 创建校验器
const validator = new Schema(des)
// 添加校验
validator.validate({ name: "值" }, (errors, field) => {
}).then(() => {
 console.log('校验成功')
}).catch(({ errors, fields } => {
  console.log('校验失败', errors)
}))

API学习

1. validate
   validate:添加校验的方法,使用语法:

validator.validate( source , [options], callback ): Promise

• source：需要校验的属性和值,必传
• options：描述处理验证对象的选项
• callback：校验完成之后的回调
  该方法返回的Promise对象,所以有.then,.catch

Options 选项参数有：

• suppressWarning：是一个 Boolean 值，是否抑制无效的内部警告。
• first：是一个 Boolean 值，当第一个校验失败时，是否继续向后校验，如果为真，只返回第一个校验失败信息。
• firstFields：是一个 Boolean 值或 字符串数组，当指定的第一个校验规则生成错误时调用回调，不再处理同一字段的验证规则，true 表示所有字段。

2. Rules
   rules：校验规则，有两种写法
   第一种：对象数组，便于给单个字段添加多个验证规则：

const descriptor = {
 name:[
  {
    type: 'string',
    required: true,
    validator(rule, value) {
     return value != ''
    }
    message: '用户名不能为空',
   },
   {
     type: 'string',
     min: 3,
     max: 8,
     validator(rule, value) {
      return rule.min < value.length && value.length < rule.max
     },
    message: '用户名长度 3-8',
   },
 ]
}

第二种：定义执行验证的函数：

function (rule, value, callback, source, options)

• rule是源描述符中与正在验证的字段名相对应的验证规则,始终会为其分配一个字段属性,该属性包含要验证的字段名称.
• value是校验属性的值
• callback调用完成后调用的回调函数
• source校验的源对象
• options 其他选项

3. Type
   type是指要校验的属性类型,类型值有:

• string
• number
• boolean
• regexp(是一个RegExp实例或new RegExp时不生成异常字符串)
• method 必须是一个函数
• integer 数字和整数类型
• float 数字和浮点数
• array 是数组,使用Array.isArray验证
• object 是一个对象并且不是数组对象
• enum 值必须存在于枚举中
• date 值必须是由日期确定的有效期
• url 一个url类型
• hex 十六进制
• email email类型
• any 可以为任意类型

4. Required :代表源对象上必须存在该字段
5. Pattern 属性 是 必须匹配正则表达式
6. Range 通过使用min()和max()定义一个范围,对应字符串和数组会与length比较,对于数字会直接拿值比较
7. Length :会使用 len 属性定义长度，对应字符串和数组会与 length 比较，数字会直接拿值进行比较。如果 min、max 和 len 同时出现时，len 优先使用
8. Enumerable： enumerable 可枚举值。对于可以枚举出所有情况的类型，可使用枚举校验，如

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

9. Whitespace
   将仅包含空格的必填字段视为错误。要为仅由空格组成的字符串添加附加测试，将whitespace属性添加到值为true，规则必须是string类型。

10. DeepRules
    如果需要校验的数据类型是对象，且需要校验对象中的每一个属性，此时需要通过嵌套规则分配给rules的fields属性来校验属于object或array类型的校验规则
    对object的深度监听：

const rules = {
 address: {
 type: 'object',
 required: true,
 fields: {
  street: { type: 'string', required: true },
  city: { type: 'string', required: true }
  }
 }
}

！！！如果在父规则上没有指定 required 属性，此时没有在源对象上声明的字段也是有效的，但是深度监听会失效
对array的深度监听：

const descriptor = {
  roles: {
    type: 'array',
    required: true,
    len: 3,
    fields: {
      0: { type: 'string', required: true },
      1: { type: 'string', required: true },
      2: { type: 'string', required: true },
    },
  },
};

提供 { roles: [‘admin’, ‘user’] } 这样的 source 对象，将创建两个错误。一个用于数组长度不匹配，另一个用于缺少索引 2 处所需的数组
12. defaultField
defaultField 属性用来校验内部的所有值，可以用于 array 或 object 类型。

const descriptor = {
 urls: {
  type: 'array',
  required: true,
  defaultField: { type: 'url' },
 }
};

13. transform
    有时校验之前需要进行某种处理或者转化，因此在校验规则中添加 transform 函数，在校验之前对属性进行某种转换，并重新分配给源对象以更改属性的值。

const rules = {
 username: {
  type: 'string',
   required: true,
   pattern: /^[a-z]+$/,
   transform(value) {
    return value.trim();
   },
 },
}
const validator = new Schema(rules)
const source = { username: ' user  ' };
validator.validate(source).then(() => assert.equal(source.name, 'user'));

transform 函数内的 value.trim() 会把传入的值前后空格去掉，所以校验成功，如果没有 transfrom 函数，校验将会失败。
15. message

const rules = {
 username: {
  type: 'string',
  required: true,
  message:"用户名不能为空" 
 }
}
//message:"<b>用户名不能为空</b>"
// message: () => this.$t( '请填写名称' ) 

多种语言下，相同的验证规则
在这种情况下，您可以为该语言提供自己的消息，并将其分配给 shema：

import Schema from 'async-validator';
const cn = {
  required: '%s 必填',
};
const descriptor = { name: { type: 'string', required: true } };
const validator = new Schema(descriptor);
// deep merge with defaultMessages
validator.messages(cn);

15. asyncValidator
    为指定字段自定义异步校验函数：

const rules = {
 username: [
  {
   type: 'string',
   required: true,
   whitespace: true,
   transform(value) {
   return value.trim()
   },
   message: '用户名不能为空格',
   asyncValidator: (rule, value) => {
   return new Promise((resolve, reject) => {
    setTimeout(() => { //模拟异步操作
    if (value != '') {
     resolve()
    } else {
      reject('error')
    }
   }, 2000)
  })
 },
 ],
}
const validator = new Schema(rules)
const source = { username: ' user  ' };
validator.validate(source).then((res) => {
 console.log('res', res)
})
.catch(({ errors, fields }) => {
 console.log('err', errors)
 console.log('fields', fields)
})

16. validator
    为指定字段自定义同步校验函数

const rules = {
 username: [
  {
   type: 'string',
   required: true,
   validator(rule, value) {
    return value != ''
    },
    message: '用户名不能为空',
   },
   {
    type: 'string',
    min: 6,
    max: 10,
    validator(rule, value) {
      return rule.min < value.length && value.length < rule.max
     },
     message: '长度 6-8',
   },
 ],
}

避免警告

var Schema = require('async-validator');
Schema.warning = function(){};