页面有两个输入框 想要写一个校验规则 校验这两个输入框的只能输入1-99之间的数字 并且这两个输入框中填的数字相加不能大于100
<el-col :span="6">
<el-form-item
class="form-item"
v-if="
ruleForm.payMode[0] == 'YHZZ' || ruleForm.payMode[1] == 'YHZZ'
"
label="银行转账比例(%):"
prop="arbAdditionInfo.yhzzPercentage"
>
<el-input
class="payinput-width"
v-model="ruleForm.arbAdditionInfo.yhzzPercentage"
size="mini"
></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item
class="form-item form-item-width"
v-if="
ruleForm.payMode[0] == 'CDHP' || ruleForm.payMode[1] == 'CDHP'
"
label="承兑汇票比例(%):"
prop="arbAdditionInfo.cdhpPercentage"
>
<el-input
class="payinput-width"
v-model="ruleForm.arbAdditionInfo.cdhpPercentage"
size="mini"
></el-input>
</el-form-item>
</el-col>
下面是现在写的校验规则 只写了一个 不知道要怎么添加 和判断
var validatePercentage = (rule, value, callback) => {
if (!value || isNaN(value) || value <= 0 || value >= 99) {
return callback(new Error("百分之0-99"));
} else {
callback();
}
};
需要改的地方自己改改
<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="价格" prop="price">
<el-input v-model="ruleForm.price"></el-input>
</el-form-item>
<el-form-item label="价格2" prop="price2">
<el-input v-model="ruleForm.price2"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
let validatePass = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入价格"));
} else {
if (Number(value) + Number(this.ruleForm.price2) > 100) {
callback(new Error("不能大于100"));
}
callback();
}
};
let validatePass2 = (rule, value, callback) => {
if (!value) {
callback(new Error("请输入价格"));
} else {
if (Number(value) + Number(this.ruleForm.price) > 100) {
callback(new Error("不能大于100"));
}
callback();
}
};
return {
ruleForm: {
price: "",
price2: "",
},
rules: {
price: [{ validator: validatePass, trigger: "blur" }],
price2: [{ validator: validatePass2, trigger: "blur" }],
},
};
},
methods: {},
};
</script>
可以写一个监听器,当两个值相加超过100就提示错误