欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

`element-ui` form 表单验证所有可能的验证内容,如何自定义表单验证

程序员文章站 2024-03-14 19:55:05
...

element-ui form 表单验证所有可能的验证内容,如何自定义表单验证

验证的官方说明在 https://github.com/yiminghe/async-validator

以下例子中定义了各种形式的验证方法:

rules: {
    password: [
        // 必填
        {required: true, message: '请输入密码', trigger: 'blur'},

        // 验证数组
        {type: 'array', required: true, message: '请至少选择一个选项', trigger: 'change'},

        // 验证日期
        {type: 'date', required: true, message: '请选择日期', trigger: 'change'},

        // 验证字符串长度
        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},

        // 自定义的验证方法,
        // 如果验证不成功,返回 `callback(new Error('错误提示内容'))`
        // 如果验证成功只调用 `callback()` 即可
        {
            validator: (rule, value, callback, source, options) => {
                const errors = [];
                if (/\d+/.test(value)) {
                    callback()
                } else {
                    callback(new Error('密码只允许使用数字'))
                }
            },
            trigger: 'blur'
        },
    ],
}