const one = Number(value);
const min = Number(this.form.min);
if (!min || one > min) {
return callback();
}
return callback(new Error('输入值不得小于最小阈值'));
},
大概，你会想，这不就完了吗！so easy！现在真正的坑才开始
填坑（重点）
根据上面的写法，组件的基本功能实现了，但是有一个坑！如下：
很显然，左侧值是小于右侧值的，但是校验提示仍然报错。究其原因，还是关联校验的问题。既然是关联交验，改变其中一个时应该会重新校验两个。很简单，在input改变时，重新校验表单不就OK了吗
handleChange() {
this.$refs.form.validate();
}真实表现正如我们所料，但是当我们打开console的时候，会看到
Uncaught (in promise) false，这又是什么鬼，身为优秀的前端工程师，你定不会允许自己的代码里报错，即使不影响正常流程。经查证：Promise报错，Uncaught的意思是代表有reject状态没有被catch。究其原因，改变一个值时，校验整个表单时，改变的那个input会执行两次校验，导致异常。
最后做如下修改：
handleMinChange() {
this.$refs.form.validateField('max');
},
handleMaxChange() {
this.$refs.form.validateField('min');
},// 并对外暴露操作方法
getFormData() {
const ret = {};
this.$refs.form.validate((valid) => {
ret.valid = valid;
ret.form = this.form;
});
return ret;
},
resetForm() {
this.$refs.form.resetFields();
},
总结input表单输出值为String类型，即使设置了
type=number关联交验时需要验证其关联项，且不能重复校验全部代码：
<template>
<el-form ref="form" :model="form" :rules="rules">
<el-form-item prop="min">
<el-input v-model="form.min" @change="handleMinChange" />
</el-form-item>
~
<el-form-item prop="max">
<el-input v-model="form.max" @change="handleMaxChange" />
</el-form-item>
</el-form>
</template><script>
const MIN_NUMBER = 1;
const MAX_NUMBER = 100000;
export default {
data() {
return {
form: { min: '20', max: '100000' },
rules: {
min: [
{ required: true, message: '必填项，请维护', trigger: 'blur' },
{ validator: this.validateCom, trigger: 'blur' },
{ validator: this.validateMin, trigger: 'blur' },
],
