• 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
  • 相关阅读:
    ElastaticSearch学习笔记(三) ----- 聚合查询
    ElastaticSearch学习笔记(二) ----- DSL查询与过滤
    ElastaticSearch学习笔记(一) ----- 基础概念
    BizTalk连接SAP方法
    解决spark日志清理问题
    Spark Standalone模式 高可用部署
    @Data注解踩坑之大小写
    SVN No such revision *
    svn: Base checksum mismatch on
    Bean的原始版本与最终版本不一致?记一次Spring IOC探索之旅
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15562430.html
Copyright © 2020-2023  润新知