vue 表单验证 rule.message bug All In One

vue 表单验证 rule.message bug All In One

不使用 rule.message ✅

    validateAmount (rule, value, callback) {
        if (value === '') {
            callback(new Error('请输入预算金额'));
        } else if (value < this.amountValue || value > 9999999.99 || !Util.validAmount(value)) {
            callback(new Error(`预算不少于${this.amountValue}元，不超过9999999.99元，仅支持最多2位小数`));
        } else {
            callback();
        }
    },

使用 rule.message ❌

    budgetAmountValidate (rule, value, callback) {
        const minValue = this.ruleForm.groupBudgetMode === 'BUDGET_MODE_DAY' ? 300 : 800;
        const invalid = (value < minValue || value > 9999999.99 || !Util.validAmount(value));
        if (value === '') {
            callback(new Error(rule.message));
        } else if (invalid) {
            console.log('invalid', invalid);
            const message = `预算不少于${minValue}元，不超过9999999.99元，仅支持最多2位小数`;
            // rule.message 不更新
            callback(new Error(message));
        } else {
            callback();
        }
    },

使用 rule.message ✅

    budgetAmountValidate (rule, value, callback) {
        const minValue = this.ruleForm.groupBudgetMode === 'BUDGET_MODE_DAY' ? 300 : 800;
        const invalid = (value < minValue || value > 9999999.99 || !Util.validAmount(value));
        if (value === '') {
            callback(new Error(rule.message));
        } else if (invalid) {
            console.log('invalid', invalid);
            const message = `预算不少于${minValue}元，不超过9999999.99元，仅支持最多2位小数`;
            // 覆盖 rule.message ✅
            rule.message = message;
            callback(new Error(message));
        } else {
            callback();
        }
    },

    budgetAmountValidate (rule, value, callback) {
        const minValue = this.ruleForm.groupBudgetMode === 'BUDGET_MODE_DAY' ? 300 : 800;
        const invalid = (value < minValue || value > 9999999.99 || !Util.validAmount(value));
        if (value === '') {
            // callback(new Error(rule.message));
            const message = `请输入预算金额`;
            // 覆盖 rule.message ✅
            rule.message = message;
            callback(new Error(message));
        } else if (invalid) {
            console.log('invalid', invalid);
            const message = `预算不少于${minValue}元，不超过9999999.99元，仅支持最多2位小数`;
            // 覆盖 rule.message ✅
            rule.message = message;
            callback(new Error(message));
        } else {
            callback();
        }
    },

demo

    <el-form-item class="is-required" label="预算" prop="budgetAmount"
        :rules="[{
            required: true,
            message: '请输入预算金额',
            trigger: ['change', 'blur'],
            validator: budgetAmountValidate,
        }]">
        <el-input
            style="width: 300px;"
            class="tm-budget-amount"
            placeholder="请输入预算金额"
            v-model="ruleForm.budgetAmount">
            <el-select
                slot="prepend"
                class="tm-custom-prepend none-border"
                v-model="ruleForm.groupBudgetMode"
                :disabled="isDisableBudget"
                @change="groupBudgetModeChange">
                <el-option
                    v-for="(item, i) in budgetDicts.groupBudgetModeList"
                    :key="i"
                    :value="item.value"
                    :label="item.name">
                </el-option>
            </el-select>
            <span slot="suffix" class="tm-custom-suffix">元</span>
        </el-input>
    </el-form-item>

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---