vue中常用的rules验证方式总结

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [
        {
            required: true,
            message: '请输入考核层级',
            trigger: 'blur',
        }
   ]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        min: 2,
        max: 5,
        message: '字符长度在2到5之间',
        trigger: 'blur'
    }]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        min: 1,
        max: 100,
        type: 'number',
        message: '请输入1到100之间的数字',
        trigger: 'change'
    }]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [{
            pattern: /^[a-zA-Z0-9]+$/,
            message: '只能包含字母和数字',
            trigger: 'blur'
        }
    ]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [{
            validator: (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('输入不能为空'));
                } else if (!/^\d+$/.test(value)) {
                    callback(new Error('请输入数字'));
                } else {
                    callback(); // 验证通过
                }
            },
            trigger: 'change'
        }

    ]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

    rules: [{
        type: 'enum',
        enum: ['option1', 'option2'],
        message: '请选择有效选项',
        trigger: 'change'
    }]
}

{
    label: "用户姓名",
    prop: "UserName",
    type: "input",

​​​​​​​    rules: [{
        len: 5,
        message: '请输入5个字符',
        trigger: 'blur'
    }]
}