양식 체크에서 JavaScript 정책 모드 사용 상세 정보 보기

모두가 알다시피 표는 확실히 앞쪽에 있다. 음, 또는 웹 페이지에서 적지 않은 비중을 차지한다.사실상 거의 모든 중대형 사이트는'로그인 등록'을 해서 사용자 정보를 검증하고 형언할 수 없는 위험을 방지한다.
그러면 표의 우열은 전단 개발자들이 급히 해결해야 할 문제가 된다.사실 나는'코드의 가독성'또는'복용성'과'번잡함'이라고 부르고 싶다.
표에도'우열'이 있습니까?장난해?
나는 네가 아래의 코드를 진지하게 볼 수 있다고 생각한다. 그것은 약간의 새로운 지식을 사용했다.

<form action="xxx" id="registerForm">
	 ：<input type="text" name="userName" id="name" />
	 ：<input type="text" name="password" id="pass" />
	 ：<input type="text" name="phoneNumber" id="phone" />
	<button> </button>
</form>

사용자 이름, 비밀번호, 핸드폰 번호는 폼에서 가장 흔히 볼 수 있는 것이어야 한다. 자, 우리는 이것으로 분석합시다!
위의 것들은 간단한 프레젠테이션 효과일 뿐입니다. css의valid/invalid, HTML5의required/pattern으로 협조하여 완성할 수 있습니다.

<script>
	var registerForm=document.getElementById('registerForm')
	registerForm.onsubmit=function(){
		if(registerForm.userName.value==''){
			document.getElementById("name").setCustomValidity(' ');
			return false;
		}
		if(registerForm.password.value.length<6){
			document.getElementById("pass").setCustomValidity(' 6 ');
			return false;
		}
		if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)){
			document.getElementById("phone").setCustomValidity(' ');
			return false;
		}
	}
</script>

그렇다고 완벽하다고 생각하지 않을 것이다. 현재 폼은 세 개밖에 없다. 어느 날 N개로 늘어나면'복사 붙여넣기'로도 당신을 구할 수 없다.
바로 이때 전략 모드가 생각났다(봐, JS는 항상 너를'영광스럽게 해준다')
전략 모델을 말하자면 자연스럽게 인터페이스 노출과 논리적 분리를 실현하는 원칙을 따라야 한다.
전략 모델은 일련의 알고리즘을 정의하여 그것들을 하나하나 봉인하는 것을 가리킨다.변하지 않는 부분과 변화하는 부분을 분리하는 것은 모든 디자인 모델의 주제이고 전략 모델도 예외가 아니다. 전략 모델의 목적은 알고리즘의 사용과 알고리즘의 실현을 분리하는 것이다.
정책 모델을 바탕으로 하는 프로그램은 적어도 두 부분으로 구성된다.첫 번째 부분은 하나의 전략 클래스로 전략 클래스는 구체적인 알고리즘을 봉인하고 구체적인 계산 과정을 책임진다.두 번째 부분은 환경 클래스인 Context입니다. Context는 고객의 요청을 받아들인 다음에 요청을 특정한 정책 클래스에 의뢰합니다.이렇게 하려면 Context에서 어떤 정책 대상에 대한 인용을 유지해야 한다는 것을 설명한다
― 자바스크립트 디자인 모델과 개발 실천
그러면 첫 번째 단계에서 우리는 이러한 검증 논리를 [전략 대상]으로 봉인해야 한다.

var strategies={
	isNoneEmpty:function(value,errorMsg){
		if(value===''){
			return errorMsg;
		}
	},
	minLength:function(value,length,errorMsg){
		if(value.length<length){
			return errorMsg;
		}
	},
	isMobile:function(value,errorMsg){
		if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
			return errorMsg;
		}
	}
};

다음으로 우리는'노출된''호출된'방법 클래스를 실현해야 한다. 이것은 context(상하문)로서 사용자의 요청을 접수하고 검증 대상인stratrgies에 의뢰할 것이다.

var Validator=function(){
	this.cache=[]; // 
};
Validator.prototype.add=function(dom,rule,errorMsg){
	var ary=rule.split(':');
	this.cache.push(function(){
		var strategy=ary.shift();
		ary.unshift(dom.value);
		ary.push(errorMsg);
		return strategies[strategy].apply(dom,ary); // strategies ， this dom ，ary 
	});
};
Validator.prototype.start=function(){
	for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){
		var msg=validatorFunc();
		if(msg){
			return msg;
		}
	}
}

사용:

var validataFunc=function(){
	var validator=new Validator();
	
	// 
	validator.add(registerForm.userName,'isNoneEmpty',' ');
	validator.add(registerForm.password,'minLength:6',' 6 ');
	validator.add(registerForm.phoneNumber,'isMobile',' ');
	
	var errMsg=validator.start(); // 
	return errorMsg; // 
}

var registerForm=document.getElementById('registerForm')
registerForm.onsubmit=function(){
	var errorMsg=validataFunc();
	if(errorMsg){
		// 
		return false; // 
	}
}

우리가 볼 수 있는 것은validator 대상에 일련의 검사 규칙을 추가한 후에 validator.start() 방법을 호출해서 검사를 시작합니다.만약 validator.start() 이 정확한 errorMsg 문자열을 반환값으로 되돌려 주었다면, 이 검사가 통과되지 않았음을 설명합니다. 이때 registerForm.onsubmit 방법으로false를 되돌려 폼의 제출을 막아야 합니다.
이것은 확실히 이전보다 훨씬 낫다. 적어도 우리가 검증 규칙을 수정할 때 조금도 힘들지 않다.

validator.add(registerForm.userName,'minLength:2',' 2 ')

그러나 문제도 뒤따랐다. 우리는 사용자 이름에 대한 검증 규칙인'비워둘 수 없다'를'두 자리보다 적을 수 없다'로 바꾸면'비워둘 수 없다'는 것을 검증할 수 없다.
엘리먼트-ui처럼 다양한 검증 규칙을 사용자 정의할 수 있을까요?이렇게

validator.add(registerForm.userName,[{
	strategy:'isNoneEmpty',
	errorMsg:' '
},{
	strategy:'minLength:2',
	errorMsg:' 2 '
}])

현재 "rule"는 수조-대상의 형식입니다. 우리는add 함수를 고쳐야 합니다.

Validator.prototype.add=function(dom,rules){
	var self=this;
	for(var i=0,rule;rule=rules[i++];){
		(function(rule){
			var strategyAry=rule.strategy.split(':');
			var errorMsg=rule.errorMsg;
			self.cache.push(function(){
				var strategy=strategyAry.shift();
				strategyAry.unshift(dom.value);
				return strategies[strategy].apply(dom,strategyAry);
			});
		})(rule)
	}
}

정책 모드의 이점:
조합, 의뢰, 다태 등 기술과 사상을 이용하여 다중 조건 선택 문장을 효과적으로 피할 수 있다(이 점에 대해 필자는 이 글은 상세하게 설명하였다.디자인 모델이 모두 가져야 할'대외 개방-폐쇄'원칙을 완벽하게 실현했고 전략 모델을 바탕으로 실현된 규칙은 대부분 확장하기 쉽고 사용하기 쉬워 대량의 CV 작업을 피했다
이 양식 검사를 통해 JavaScript 정책 모드의 사용에 대한 상세한 설명을 소개합니다. 더 많은 JavaScript 정책 모드의 사용 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!