Skip to content

表单校验

在 FormCreate 中,可以通过 validate 配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件,都支持表单校验。本文将详细介绍验证规则的使用方法,并提供一些示例来帮助您更好地理解和应用这些功能。

基本验证规则

validate 配置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象,您可以通过设置不同的属性来控制验证行为。

参数说明类型默认值
enum枚举类型string-
len字段长度number-
max最大长度number-
message校验文案string-
min最小长度number-
pattern正则表达式校验(string 时不需要前后的/)RegExp | string-
required是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any-
type内建校验类型,可选项string'string'
validator自定义校验,通过 this.api可以拿到表单 apifunction(rule, value, callback)-
whitespace必选时,空格是否会被视为错误booleanfalse

注意

type 必须与组件的 value 数据类型严格一致,否则无法按预期完成数据校验。新版表单验证已无需手动配置 type 类型,使用方法请查看表单验证(新版)

各 UI 框架的表单验证实现方式和参数可能存在差异,请查阅对应框架文档中的表单验证章节。

自定义验证中可通过 this.rulethis.api 获取组件和表单的相关信息,便于在验证时访问其他组件的值。

更多详细用法请查阅 async-validator 文档或者官方文档中的表单验证章节,可快速实现多样化的校验需求,显著提升表单交互体验。

必填验证

通过配置 required 属性为表单字段添加必填验证,当用户未输入名称时提交表单会触发验证错误并显示提示消息,确保数据的完整性。

最小值验证

为数字输入组件配置最小值验证规则,确保用户输入的数字不小于10,否则会显示错误提示信息,实现数据范围的精确控制。

date 组件必填验证

为日期选择器组件配置必填验证规则,包括单日期选择和日期区间选择两种模式,确保用户必须选择有效的日期值才能提交表单。

最小选中项验证

为多选框组件配置最小选中项验证规则,要求用户至少选择3个选项,否则会显示错误提示信息,确保满足最低选择数量要求。

正则表达式校验

注意

pattern 类型为 string 时,前后不能包含 / 符号,否则会导致正则表达式无效。

使用正则表达式验证输入框内容,限制用户只能输入数字字符,否则会显示错误提示信息,实现特定格式的数据校验。

自定义验证

注意

自定义验证中无论成功或失败,都必须执行 callback 回调函数。

使用自定义验证函数对输入框内容进行校验,只有当用户输入"form-create.com"时才会通过验证,否则显示自定义错误提示信息。

常见校验示例

1.必填字段校验

js
const rule = {
  type: 'input',
  field: 'username',
  title: '用户名',
  validate: [
    { required: true, message: '用户名是必填项' }
  ]
}

2.最小长度校验

js
const rule = {
    type: 'input',
        field: 'password',
        title: '密码',
        validate: [
        { required: true, min: 6, message: '密码长度不能少于6个字符' }
    ]
}

3. 正则表达式校验

js
const rule = {
    type: 'input',
        field: 'phone',
        title: '电话号码',
        validate: [
        { required: true, message: '请输入电话号码' },
        { pattern: '^1[3-9]\d{9}$', message: '请输入有效的手机号' }
    ]
}

4. 自定义校验

js
const rule = {
    type: 'input',
        field: 'age',
        title: '年龄',
        validate: [
        {
            validator: (rule, value, callback) => {
                if (value < 18) {
                    callback('年龄必须大于或等于18岁');
                } else {
                    callback();
                }
            },
            message: '请输入合法的年龄'
        }
    ]
}

5. 枚举值校验

js
const rule = {
    type: 'select',
        field: 'role',
        title: '角色',
        validate: [
        { required: true, message: '请选择角色' },
        { enum: ['admin', 'user', 'guest'], message: '角色必须是admin, user, 或guest' }
    ],
        options: [
        { label: '管理员', value: 'admin' },
        { label: '用户', value: 'user' },
        { label: '游客', value: 'guest' }
    ]
}

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