21-vue中rules 的验证方式

vue中常用的几种表单rules验证方式：

 

message：报错信息

trigger：触发方式

1）blur ：失去焦点时进行验证

2）change ：当值发生变化时进行验证

 

required：指定字段是否为必填项（此栏是否为空）

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

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

min/max：用于验证字段的最小值或最大值（适用于字符串长度或数字范围）

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

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

type：指定字段的类型，如 string, number, boolean, array, date, email, url等

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

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

pattern：使用正则表达式进行验证

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

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

validator：自定义验证逻辑，提供最大灵活性，可以使用回调函数来处理复杂的验证逻辑

{
    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'
        }

    ]
}

enum：指定枚举值，用于验证输入是否在特定值的集合中

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

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

len：验证字段的固定长度（适用于字符串或数组）

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

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

 

扩展：有一个需求，我需要在监视属性中，增加一个自定义rules规则，规则是判断两个日期是否符合条件，不符合需要返回 '日期校验错误'

watch: {
  
    'form.workloadCoefficient': function(value) {
        // this.form.workloadPrice = value * this.form.workload

        const column = this.findObject(this.option.column, 'workloadCoefficient')
        const date1 = new Date("2024-09-20")
        const date2 = new Date("2024-09-25")

        console.log("date1和date2", date1, date2)

        column.rules = [{
            validator: (rule, value, callback) => {
                if (date1 < date2) {
                    callback(new Error('日期校验错误'));
                } else {
                    callback(); // 验证通过
                }
            },
            trigger: 'change'
        }]

        // this.$nextTick() 在下次DOM更新循环结束之后执行延迟回调
        // 也就是说，在修改数据之后立即使用这个方法，获取更新后的DOM.
        this.$nextTick(() => {
            this.$refs.crud.validateField('workloadCoefficient');
        });
    }
},