elementui form表单自定义验证两个输入框大小的规则

前言

有这样一个表单，需要判断结束端口大于起始端口。起始端口的prop:pubPortStart，结束端口的prop:pubPortEnd。

开始

开始我是这样定义的，分别去定义两个接口的验证规则，然后再验证规则里再去验证另一个输入框，这样就回造成重复调用，浏览器报错。

<script>
	export default{
		data(){
			var validateStart = (rule, value, callback) => {
		        if(this.form.pubPortEnd){
		          if(Number(this.form.pubPortEnd) > Number(value)){
		            callback();
		            this.$refs.form.validateField('pubPortEnd');
		          }else{
		            callback(new Error('无效的源起始端口'));
		          }
		        }else{
		          callback();
		        }
		    };
		    var validateEnd = (rule, value, callback) => {
		        if(this.form.pubPortStart){
		          if(Number(this.form.pubPortStart) < Number(value)){
		            callback();
		            this.$refs.form.validateField('pubPortStart');
		          }else{
		            callback(new Error('无效的源结束端口'));
		          }
		        }else{
		          callback();
		        }
		    };
		}
	}
</script>	

然后经过研究，可以只让结束端口去显示信息的错对，这样就解决了相互嵌套一直调用报错的问题。代码如下。

<script>
  export default{
  	data(){
		var validateStart = (rule, value, callback) => {
	        if(this.form.pubPortEnd){
	          this.$refs.form.validateField('pubPortEnd');
	        }
	        callback();
	    };
	    var validateEnd = (rule, value, callback) => {
	        if(this.form.pubPortStart){
	          if(Number(this.form.pubPortStart) < Number(value)){
	            callback();
	          }else{
	            callback(new Error('无效的源结束端口'));
	          }
	        }else{
	          callback();
	        }
	    };
	    return{
			 rules: {
				pubPortStart: [
		          { required: true, message: "请输入起始端口", trigger: "blur" }
		          { validator: validateStart, trigger: 'blur' },
		        ],
		        pubPortEnd: [
		          { required: true, message: "请输入结束端口", trigger: "blur" },
		          { validator: validateEnd, trigger: 'blur' },
		        ],
			}
		}
	}
  }

  </script>  

因为这个错误花了点时间去解决，在此记录一下。