<form action="xxx" id="registerForm">
	請(qǐng)輸入用戶名：<input type="text" name="userName" id="name" />
	請(qǐng)輸入密碼：<input type="text" name="password" id="pass" />
	請(qǐng)輸入手機(jī)號(hào)：<input type="text" name="phoneNumber" id="phone" />
	<button>提交</button>
</form>

<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('手機(jī)號(hào)碼格式不正確');
			return false;
		}
	}
</script>

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

var Validator=function(){
	this.cache=[]; //用于保存接收到的校驗(yàn)規(guī)則
};
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); //調(diào)用strategies對(duì)象的指定方法對(duì)象，并規(guī)定在函數(shù)對(duì)象內(nèi)部this指向dom元素，ary作為參數(shù)傳入
	});
};
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();
	
	//添加校驗(yàn)規(guī)則
	validator.add(registerForm.userName,'isNoneEmpty','用戶名不能為空');
	validator.add(registerForm.password,'minLength:6','密碼長度不能少于6位');
	validator.add(registerForm.phoneNumber,'isMobile','手機(jī)號(hào)碼格式不正確');
	
	var errMsg=validator.start(); //獲得校驗(yàn)結(jié)果
	return errorMsg; //返回
}

var registerForm=document.getElementById('registerForm')
registerForm.onsubmit=function(){
	var errorMsg=validataFunc();
	if(errorMsg){
		//觸發(fā)錯(cuò)誤提示
		return false; //并阻止表單提交
	}
}

validator.add(registerForm.userName,'minLength:2','用戶名不能少于2位')

validator.add(registerForm.userName,[{
	strategy:'isNoneEmpty',
	errorMsg:'用戶名不能為空'
},{
	strategy:'minLength:2',
	errorMsg:'用戶名長度不能少于2位'
}])

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