Element Plus 组件库 - Form 表单校验 message 与 validator 组合使用情况观察

Form 表单校验 message 与 validator 组合使用情况观察

测试代码

<el-form :model="myConfigParams" :rules="myConfigRules" label-width="100px" style="width: 300px">
    <el-form-item label="IP" prop="ip">
        <el-input v-model="myConfigParams.ip" type="text" />
    </el-form-item>
    <el-form-item label="端口" prop="port">
        <el-input v-model.number="myConfigParams.port" type="number" />
    </el-form-item>
</el-form>

const myConfigParams = reactive({
    ip: "",
    port: null,
});

1、只有 message

const myConfigRules = reactive({
    ip: [
        {
            required: true,
            trigger: "blur",
            message: "[message] IP 不能为空",
        },
    ],
});

• 输出结果

使用 message 中的错误信息

2、只有 validator

const myConfigRules = reactive({
    ip: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callBack) => {
                console.log("执行了 validator 函数");

                if (value === "") {
                    callBack("[validator] IP 不合法");
                    return;
                }
                if (!ipCheck(value)) {
                    callBack("[validator] IP 不合法");
                    return;
                }
                callBack();
            },
        },
    ],
});

• 输出结果

执行 validator 函数，使用 validator 中的错误信息

3、message 与 validator 组合使用

const myConfigRules = reactive({
    ip: [
        {
            required: true,
            trigger: "blur",
            message: "[message] IP 不能为空",
            validator: (rule, value, callBack) => {
                console.log("执行了 validator 函数");

                if (value === "") {
                    callBack("[validator] IP 不合法");
                    return;
                }
                if (!ipCheck(value)) {
                    callBack("[validator] IP 不合法");
                    return;
                }
                callBack();
            },
        },
    ],
});

• 输出结果

执行 validator 函数，但是使用 message 中的错误信息