网站首页 Vue 正文

vue+element动态校验、自定义校验规则、实时校验

作者：web半晨更新时间： 2022-06-05 Vue

1、HTML部分

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态校验</title>
    <link rel="stylesheet" href="/node_modules/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" label-width="100px">
            <el-form-item label="匹配金额" prop="matchingValue">
                <el-input style="width: 30%;" disabled v-model="ruleForm.matchingValue"></el-input>
            </el-form-item>
            <el-form-item label="输入金额" prop="value">
                <el-input style="width: 30%;" v-model="ruleForm.value"></el-input>
            </el-form-item>
        </el-form>
    </div>

    <script src="/node_modules/vue/dist/vue.js"></script>
    <script src="/node_modules/element-ui/lib/index.js"></script>
    <script src="./index.js"></script>
</body>

2、JavaScript部分

new Vue({
    el: "#app",
    data() {
        return {
            ruleForm: {
                matchingValue: '24.00',
                value: null
            },
            rules: {
                matchingValue: [{ required: false, message: '请输入', trigger: 'blur' },],
                value: [
                    { required: true, message: '请输入', trigger: 'blur' },
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            console.log(rule, value);
                            if (Number(value) < Number(this.ruleForm.matchingValue)) return callback(new Error('实收金额大于等于应缴金额'));
                            callback();
                        },
                        trigger: ['change', 'blue'],
                    },
                ],
            }
        }
    },
});

3、实现概况

模块分为两部分，第一部分是需要支付的金额展示，第二部分是input框。根据input框输入的值实时与需要支付金额进行匹配，并提示用户输入的金额是否大于等于支付金额。在element-ui表单的在input框上绑定prop属性实现自定义校验规则，这个规则在rules里面声明，使用element-ui自定义规则的validator声明函数，此函数返回rule、value和callback，使用返回的value与支付金额的value进行比较，如果输入金额小于支付金额就提示用户输入有误，否则使用callback继续调用函数。

原文链接：https://blog.csdn.net/weixin_51157081/article/details/122347679

上一篇：vue3响应式数据的判断、isRef、isReactive、
下一篇：vue创建事件总线和销毁事件总线、监听、$on、$off、E

网站首页 Vue 正文

vue+element动态校验、自定义校验规则、实时校验

目录

1、HTML部分

2、JavaScript部分

3、实现概况

相关推荐