elementui forma reglas de validación personalizadas para el tamaño de dos cuadros de entrada

prefacio

Existe tal forma, es necesario juzgar que el puerto final es mayor que el puerto de inicio. El prop:pubPortStart del puerto de inicio y el prop:pubPortEnd del puerto final.

comenzar

Al principio, lo definí así, definiendo las reglas de verificación de las dos interfaces por separado y luego verificando otro cuadro de entrada en las reglas de verificación, lo que provocará llamadas repetidas y el navegador informará un error.

<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>	

Luego, después de la investigación, solo puede dejar que el puerto final muestre el error o la exactitud de la información, lo que resuelve el problema del anidamiento mutuo y el informe constante de errores de llamadas. el código se muestra a continuación.

<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>  

Dado que este error tardó un tiempo en solucionarse, lo documentaré aquí.