校验规则

注意

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

Form props

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

验证规则说明

参数名	描述	类型	默认值
type	校验的值的类型，默认为 'string'	`'string'	'number'
required	是否必填	boolean	false
message	校验失败时展示的信息	string	-
length	校验长度（string, array）	number	-
maxLength	最大长度（string）	number	-
minLength	最小长度（string）	number	-
match	匹配校验（string）	RegExp	-
uppercase	大写（string）	boolean	false
lowercase	小写（string）	boolean	false
min	最小值（number）	number	-
max	最大值（number）	number	-
equal	校验数值（number）	number	-
positive	正数（number）	boolean	false
negative	负数（number）	boolean	false
true	是否为 true（boolean）	boolean	false
false	是否为 false（boolean）	boolean	false
includes	数组中是否包含给定值（array）	any[]	-
deepEqual	数组元素是否相等（array）	any	-
empty	是否为空（object）	boolean	false
hasKeys	对象是否包含给定属性（object）	string[]	-
validator	自定义校验规则	( value: FieldValue | undefined, callback: (error?: string) => void ) => void	-

注意

• Arco Design 使用 match 而不是 pattern 进行正则表达式校验
• Arco Design 使用 minLength 和 maxLength 而不是 min 和 max 进行字符串长度校验
• 自定义验证中无论成功或失败，都必须执行 callback 回调函数
• 自定义验证中可通过 this.rule 和 this.api 获取组件和表单的相关信息

常见校验示例

1. 必填字段校验

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

2. 长度校验

最小长度校验

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

最大长度校验

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

固定长度校验

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

3. 正则表达式校验

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

邮箱校验

const rule = {
    type: 'input',
    field: 'email',
    title: '邮箱',
    validate: [
        { required: true, message: '请输入邮箱' },
        { type: 'email', message: '请输入有效的邮箱地址' }
    ]
}

网址校验

const rule = {
    type: 'input',
    field: 'website',
    title: '网址',
    validate: [
        { type: 'url', message: '请输入有效的网址' }
    ]
}

4. 数字范围校验

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

正数校验

const rule = {
    type: 'input-number',
    field: 'price',
    title: '价格',
    validate: [
        { required: true, message: '请输入价格' },
        { type: 'number', positive: true, message: '价格必须为正数' }
    ]
}

5. 自定义校验

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

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

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

6. 枚举值校验

const rule = {
    type: 'select',
    field: 'role',
    title: '角色',
    validate: [
        { required: true, message: '请选择角色' }
    ],
    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', minLength: 2, message: '请至少选择2个标签' }
    ]
}

最大选中项校验

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', maxLength: 2, message: '最多只能选择2个分类' }
    ]
}

8. 日期校验

日期必填校验

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

9. 组合校验

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

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