• 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=" 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, 禁止转载 ️,侵权必究⚠️!


    xgqfrms
  • 相关阅读:
    quora 中有关angular与emberjs的精彩辩论
    迷你MVVM框架 avalonjs 0.94发布
    重写自己,减少判断 ---- 引发的思考
    JSON数据的优化
    记录全局错误
    Bat相关的项目应用
    C#中如何实现json转化时只处理部分属性
    JSON数据的处理中的特殊字符
    C# .net中json字符串和对象之间的转化方法
    VS调试 ---- 监视窗口、即时窗口、输出窗口
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15562430.html
Copyright © 2020-2023  润新知