두 개의 입력 상자 크기에 대한 elementui 양식 사용자 정의 유효성 검사 규칙

머리말

이런 형태가 있으니 끝 포트가 시작 포트보다 크다고 판단할 필요가 있다. 시작 포트의 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>  

이 오류를 수정하는 데 시간이 걸리므로 여기에 문서화하겠습니다.