校验规则

注意

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

Form props

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

验证规则说明

参数	说明	类型	默认值
enum	枚举类型	string	-
len	字段长度	number	-
max	最大长度	number	-
message	校验文案	string	-
min	最小长度	number	-
pattern	正则表达式校验	RegExp | string	-
required	是否必选	boolean	false
transform	校验前转换字段值	function(value) => transformedValue:any	-
type	内建校验类型，可选项	string	'string'
validator	自定义校验	function(rule, value, callback)	-
whitespace	必选时，空格是否会被视为错误	boolean	false

注意

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

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

常见校验示例

1. 必填字段校验

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

2. 长度校验

最小长度校验

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

最大长度校验

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

固定长度校验

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

3. 正则表达式校验

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

邮箱校验

const rule = {
    type: 'input',
    field: 'email',
    title: '邮箱',
    validate: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$', message: '请输入有效的邮箱地址', trigger: 'blur' }
    ]
}

网址校验

const rule = {
    type: 'input',
    field: 'website',
    title: '网址',
    validate: [
        { pattern: '^https?://.+', message: '请输入有效的网址（以http://或https://开头）', trigger: 'blur' }
    ]
}

4. 数字范围校验

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

5. 自定义校验

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

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

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: (rule, value, callback) => {
                    // 通过 this.api 访问其他字段的值
                    const password = this.api.getValue('password');
                    if (value !== password) {
                        callback('两次输入的密码不一致');
                    } else {
                        callback();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]

6. 枚举值校验

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. 数组/多选校验

最小选中项校验

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

最大选中项校验

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

8. 日期校验

日期必填校验

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

日期范围校验

const rule = {
    type: 'date-picker',
    field: 'dateRange',
    title: '活动日期',
    props: {
        type: 'daterange',
    },
    validate: [
        { required: true, type: 'array', message: '请选择活动日期范围', trigger: 'change' }
    ]
}

9. 组合校验

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. 条件校验

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: (rule, value, callback) => {
                    const enableDiscount = this.api.getValue('enableDiscount');
                    if (enableDiscount && (!value || value <= 0)) {
                        callback('启用折扣时，折扣率必须大于0');
                    } else {
                        callback();
                    }
                },
                trigger: 'blur'
            }
        ]
    }
]