Skip to content

校验规则

注意

推荐使用 FormCreate 内置的全新验证引擎进行表单验证,表单校验(新版)

在表单中如何使用验证规则

验证规则说明

表单项校验触发时机与规则类型

表单项校验触发时机:

ts
type IFormTrigger = 'change' | 'blur'

校验规则对象 IFormRules 与 Form 内部传入校验函数的 rule 类型 IFormInnerRule 定义如下:

ts
interface IFormRules {
  required?: boolean // 是否必填
  message?: string // 校验错误的提示
  // 内置的类型校验
  type?:
    | 'date'
    | 'dateTime'
    | 'float'
    | 'array'
    | 'string'
    | 'number'
    | 'url'
    | 'time'
    | 'email'
    | 'object'
    | 'boolean'
    | 'enum'
  // 校验触发时机,默认为 ['change', 'blur'] 两种场景都触发;若仅在主动调用校验方式时触发,可设置为空数组 []
  trigger?: IFormTrigger | IFormTrigger[]
  // 同步校验函数,调用回调传递错误信息
  validator?: (
    rule: IFormInnerRule, // form 内部处理后的 rule
    value: any, // 表单 model 对应的值,根据表单项 prop 获取
    callback: (e: Error) => void,
    data: object, // prop 和 value 构造的对象
    options: object // 校验配置,一般不需要用到
  ) => void
  // 异步校验函数,resolve 则表示校验成功,reject 表示校验失败
  asyncValidator?: (
    rule: IFormInnerRule,
    value: any,
    callback: (e: Error) => void,
    data: object,
    options: object
  ) => Promise<any>
}


interface IFormInnerRule {
  field: string // 表单项 prop
  fullField: string // 表单项完整 prop(嵌套校验时有用)
  type: string // 内部使用
}

同步/异步校验里成功时需调用 callback(具体签名以实现为准);失败时通过 callback 传入 Error,与 async-validator 用法一致。

参数说明类型默认值
required是否必填booleanfalse
message校验错误的提示文案string-
type内置类型校验,须与组件 value 类型一致'date' | 'dateTime' | 'float' | 'array' | 'string' | 'number' | 'url' | 'time' | 'email' | 'object' | 'boolean' | 'enum''string'
trigger校验触发时机;默认 changeblur 均触发;仅在主动调用校验时触发可设为 []IFormTrigger | IFormTrigger[]['change', 'blur']
validator同步自定义校验,ruleIFormInnerRule(rule, value, callback, data, options) => void-
asyncValidator异步自定义校验,resolve 成功,reject 失败(rule, value, callback, data, options) => Promise<any>-
enum枚举类型(async-validator)string | string[]-
len字段长度number-
max最大长度number-
min最小长度number-
pattern正则表达式校验RegExp | string-
transform校验前转换字段值(value) => transformedValue-
whitespace必选时,空格是否会被视为错误booleanfalse

注意

  • pattern 类型为 string 时,前后不能包含 / 符号,否则会导致正则表达式无效
  • type 必须与组件的 value 数据类型严格一致,否则无法按预期完成数据校验
  • 自定义校验(validator / asyncValidator)无论成功或失败,都应按约定执行 callback;失败时传入 Error
  • 自定义校验中可通过 this.rulethis.api 获取组件和表单的相关信息

更多高级用法可研究 async-validator。

常见校验示例

1. 必填字段校验

纯空格视为无效(whitespace)

2. 长度校验

最小长度校验

最大长度校验

固定长度校验

3. 正则表达式校验

邮箱校验

4. 数字范围校验

5. 自定义校验

自定义校验(访问其他字段)

6. 枚举值校验

7. 数组/多选校验

最小选中项校验

最大选中项校验

8. 日期校验

日期必填校验

日期范围校验

9. 组合校验

10. 条件校验

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用