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

目录

  • 1、HTML部分
  • 2、JavaScript部分
  • 3、实现概况


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声明函数,此函数返回rulevaluecallback,使用返回的value与支付金额的value进行比较,如果输入金额小于支付金额就提示用户输入有误,否则使用callback继续调用函数。

你可能感兴趣的:(Vue,elementUi,web前端,vue.js,前端,elementui)