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, 禁止转载 ️，侵权必究⚠️！