ElementUI表单校验

[fncheng]

rules规则

rules是一个数组对象，每一个对象都是一个数组，数组内部又包含多个对象，每个对象是一个校验规则

type ElFormRules = {
  rule: Array<ElFormRule>
}

type ElFormRule = {
  required?: true | false
  validator?: (rule: ElFormRule, value: any, callback: Function) => {}
  message: string
  trigger: string
}

table配合form使用表单校验

移除某一项的校验结果

clearValidate(props: array | string)

移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果。

[fncheng]

长度校验

len属性可以校验字符串和数组的长度，严格相等，len: 3，即字符串的长度必须等于3

async validator原文 Length

To validate an exact length of a field specify the len property. For string and array types comparison is performed on the length property, for the number type this property indicates an exact match for the number, ie, it may only be strictly equal to len.

如果需要给字符串添加最大最小长度，请使用max和min，

{ type: 'string', min: 2, max: 255, message: '长度不能超过 255 个字,不能小于 2 个字', trigger: 'blur' }

async validator添加正则校验

https://github.com/yiminghe/async-validator#pattern

自定义validator

{
   validator: async (rule, value) => {
     if (/\s/g.test(value)) {
          callback('输入不能包含空格，请删除空格后再试！');
        }
     callback()
   },
},

async validator 提示callback is deprecated. Please return a promise instead.

Ant Design Pro 中的 Form 组件的 asyncValidator 属性已经不再支持使用回调（callback）函数的方式，而是要求使用 Promise 来处理异步校验。

一般我们可以通过返回一个 Promise 对象来实现异步校验，例如：

const validateString = async (rule, value) => {
  const pattern = /\s/;
  if (!value) {
    throw new Error('输入不能为空！');
  }
  if (pattern.test(value)) {
    throw new Error('输入不能包含空格，请删除空格后再试！');
  }
  return Promise.resolve();
}