FormCreate

Appearance

校验规则 ​

注意

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

FormRule props

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

验证规则说明 ​

名称类型默认值说明必传
booleanBoolean-内置校验方法，校验值类型是否为布尔类型，示例：{ boolean: true, message: '数据类型必须是布尔类型' }N
dateBoolean / Object-内置校验方法，校验值是否为日期格式，参数文档，示例：{ date: { delimiters: '-' }, message: '日期分隔线必须是短横线（-）' }。TS 类型：boolean | IsDateOptions interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }。详细类型定义N
emailBoolean / Object-内置校验方法，校验值是否为邮件格式，参数文档，示例：{ email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' }。TS 类型：boolean | IsEmailOptions import { IsEmailOptions } from 'validator/es/lib/isEmail'。详细类型定义N
enumArray-内置校验方法，校验值是否属于枚举值中的值。示例：{ enum: ['primary', 'info', 'warning'], message: '值只能是 primary/info/warning 中的一种' }。TS 类型：Array<string>N
idcardBoolean-内置校验方法，校验值是否为身份证号码，组件校验正则为 /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/i，示例：{ idcard: true, message: '请输入正确的身份证号码' }N
lenNumber / Boolean-内置校验方法，校验值固定长度，如：len: 10 表示值的字符长度只能等于 10 ，中文表示 2 个字符，英文为 1 个字符。示例：{ len: 10, message: '内容长度不对' }。
如果希望字母和中文都是同样的长度，示例：{ validator: (val) => val.length === 10, message: '内容文本长度只能是 10 个字' }		N
maxNumber / Boolean-内置校验方法，校验值最大长度，如：max: 100 表示值最多不能超过 100 个字符，中文表示 2 个字符，英文为 1 个字符。示例：{ max: 10, message: '内容超出' }。
如果希望字母和中文都是同样的长度，示例：{ validator: (val) => val.length <= 10, message: '内容文本长度不能超过 10 个字' }
如果数据类型数字（Number），则自动变为数字大小的比对		N
messageString-校验未通过时呈现的错误信息，值为空则不显示N
minNumber / Boolean-内置校验方法，校验值最小长度，如：min: 10 表示值最多不能少于 10 个字符，中文表示 2 个字符，英文为 1 个字符。示例：{ min: 10, message: '内容长度不够' }。
如果希望字母和中文都是同样的长度，示例：{ validator: (val) => val.length >= 10, message: '内容文本长度至少为 10 个字' }。
如果数据类型数字（Number），则自动变为数字大小的比对		N
numberBoolean-内置校验方法，校验值是否为数字（1.2 、 1e5 都算数字），示例：{ number: true, message: '请输入数字' }N
patternObject-内置校验方法，校验值是否符合正则表达式匹配结果，示例：{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }。TS 类型：RegExpN
requiredBoolean-内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 requiredMark: false 隐藏必填标记N
whitespaceBoolean-内置校验方法，校验值是否为空格。示例：{ whitespace: true, message: '值不能为空' }N
telnumberBoolean-内置校验方法，校验值是否为手机号码，校验正则为 /^1[3-9]\d{9}$/，示例：{ telnumber: true, message: '请输入正确的手机号码' }N
triggerStringchange校验触发方式。可选项：change/blurN
typeStringerror校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warningN
urlBoolean / Object-内置校验方法，校验值是否为网络链接地址，参数文档，示例：{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }。TS 类型：boolean | IsURLOptions `import { IsURLOptions } from 'validator/es/lib/isURL'``。详细类型定义N
validatorFunction-自定义校验规则，示例：{ validator: (val) => val.length > 0, message: '请输入内容'}。TS 类型：CustomValidator type CustomValidator = (val: ValueType) => CustomValidateResolveType | Promise<CustomValidateResolveType> type CustomValidateResolveType = boolean | CustomValidateObj interface CustomValidateObj { result: boolean; message: string; type?: 'error' | 'warning' | 'success' } type ValueType = any。详细类型定义N

注意

  • TDesign 的 validator 返回 boolean 或 CustomValidateObj，不需要 callback
  • TDesign 支持内置的 telnumber 和 idcard 校验方法
  • TDesign 支持 trigger 和 type 属性来控制校验触发时机和错误类型
  • 自定义验证中可通过 this.rule 和 this.api 获取组件和表单的相关信息

常见校验示例 ​

1. 必填字段校验 ​

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

2. 长度校验 ​

最小长度校验 ​

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

最大长度校验 ​

js
const rule = {
    type: 'input',
    field: 'description',
    title: '商品描述',
    props: {
        type: 'textarea',
        maxlength: 200,
    },
    validate: [
        { required: true, max: 200, message: '描述长度不能超过200个字符', trigger: 'blur' }
    ]
}

固定长度校验 ​

js
const rule = {
    type: 'input',
    field: 'idCard',
    title: '身份证号',
    validate: [
        { required: true, len: 18, message: '身份证号必须是18位', trigger: 'blur' }
    ]
}

3. 正则表达式校验 ​

js
const rule = {
    type: 'input',
    field: 'phone',
    title: '手机号',
    validate: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { telnumber: true, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}

邮箱校验 ​

js
const rule = {
    type: 'input',
    field: 'email',
    title: '邮箱',
    validate: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { email: true, message: '请输入正确的邮箱地址', trigger: 'blur' }
    ]
}

身份证号校验 ​

js
const rule = {
    type: 'input',
    field: 'idCard',
    title: '身份证号',
    validate: [
        { required: true, message: '请输入身份证号', trigger: 'blur' },
        { idcard: true, message: '请输入正确的身份证号码', trigger: 'blur' }
    ]
}

网址校验 ​

js
const rule = {
    type: 'input',
    field: 'website',
    title: '网址',
    validate: [
        { url: true, message: '请输入正确的网址', trigger: 'blur' }
    ]
}

4. 数字范围校验 ​

js
const rule = {
    type: 'input-number',
    field: 'age',
    title: '年龄',
    props: {
        min: 0,
        max: 120,
    },
    validate: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { number: true, min: 18, max: 65, message: '年龄必须在18-65岁之间', trigger: 'blur' }
    ]
}

5. 自定义校验 ​

js
const rule = {
    type: 'input',
    field: 'age',
    title: '年龄',
    validate: [
        {
            validator: (val) => {
                if (val < 18) {
                    return { result: false, message: '年龄必须大于或等于18岁' };
                } else if (val > 65) {
                    return { result: false, message: '年龄不能超过65岁' };
                }
                return true;
            },
            trigger: 'blur'
        }
    ]
}

自定义校验（访问其他字段） ​

js
const rule = [
    {
        type: 'input',
        field: 'password',
        title: '密码',
        validate: [
            { required: true, min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ]
    },
    {
        type: 'input',
        field: 'confirmPassword',
        title: '确认密码',
        validate: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            {
                validator: (val) => {
                    // 通过 this.api 访问其他字段的值
                    const password = this.api.getValue('password');
                    if (val !== password) {
                        return { result: false, message: '两次输入的密码不一致' };
                    }
                    return true;
                },
                trigger: 'blur'
            }
        ]
    }
]

6. 枚举值校验 ​

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

7. 数组/多选校验 ​

最小选中项校验 ​

js
const rule = {
    type: 'checkbox',
    field: 'tags',
    title: '商品标签',
    value: [],
    options: [
        { value: '1', label: '热销' },
        { value: '2', label: '新品' },
        { value: '3', label: '推荐' },
        { value: '4', label: '限时' },
    ],
    validate: [
        { required: true, min: 2, message: '请至少选择2个标签', trigger: 'change' }
    ]
}

最大选中项校验 ​

js
const rule = {
    type: 'select',
    field: 'categories',
    title: '商品分类',
    value: [],
    props: {
        multiple: true,
    },
    options: [
        { value: '1', label: '电子产品' },
        { value: '2', label: '服装配饰' },
        { value: '3', label: '家居用品' },
    ],
    validate: [
        { required: true, max: 2, message: '最多只能选择2个分类', trigger: 'change' }
    ]
}

8. 日期校验 ​

日期必填校验 ​

js
const rule = {
    type: 'date-picker',
    field: 'birthday',
    title: '生日',
    validate: [
        { required: true, message: '请选择生日', trigger: 'change' }
    ]
}

9. 组合校验 ​

js
const rule = {
    type: 'input',
    field: 'username',
    title: '用户名',
    validate: [
        { required: true, message: '用户名是必填项', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度必须在3-20个字符之间', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'blur' }
    ]
}

10. 条件校验 ​

js
const rule = [
    {
        type: 'switch',
        field: 'enableDiscount',
        title: '启用折扣',
        value: false,
    },
    {
        type: 'input-number',
        field: 'discount',
        title: '折扣率',
        props: {
            min: 0,
            max: 1,
            step: 0.01,
            precision: 2,
        },
        validate: [
            {
                validator: (val) => {
                    const enableDiscount = this.api.getValue('enableDiscount');
                    if (enableDiscount && (!val || val <= 0)) {
                        return { result: false, message: '启用折扣时，折扣率必须大于0' };
                    }
                    return true;
                },
                trigger: 'blur'
            }
        ]
    }
]

11. 警告类型校验 ​

js
const rule = {
    type: 'input',
    field: 'description',
    title: '商品描述',
    validate: [
        { 
            max: 200, 
            message: '描述长度建议不超过200个字符', 
            type: 'warning',
            trigger: 'blur' 
        }
    ]
}

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

MIT Licensed | Copyright © 2018-present FormCreate
陕ICP备2024036423号-1