1. 问题
表单中两个输入框联合校验:最大值不能小于最小值,反之同理,当前是没有校验可以看到数据错误。
2. 方法
2.1 可以使用form表单rules属性
//最大值
<a-form-item
name="max"
label="最大值"
:rules="[
{ validator: maxContent, trigger: 'change' }
]"
>
<a-input-number
:min="0"
style="width: 275px"
v-model:value="max"
allow-clear
/>
</a-form-item>
//最小值
<a-form-item
name="min"
label="最小值"
:label-col="{ span: 8 }"
:wrapper-col="{ span: 14 }"
{ validator: minContent, trigger: 'change' }
]"
>
<a-input-number
:min="0"
style="width: 275px"
v-model:value="min"
allow-clear
/>
</a-form-item>
2.2 在script处声明校验规则并return出去
const maxContent = (rule, value, callback) => {
if (!value) {
return callback()
}
if (Number(value) < this.min) {
return callback('含量上限不能小于含量下限')
}
callback()
}
const minContent = (rule, value, callback) => {
if (Number(value) <= this.max) {
if (Number.isInteger(Number(value)) && Number(value) > 0) {
callback()
} else {
callback()
}
} else {
callback('含量下限不能大于含量上限')
}
callback()
}
3、完成