JavaScript高级验证器

首先说一下，这个例子不是我原创的，例子本身来自《JavaScript权威指南》(4th Edition),之所以放在这里，实在是因为这个js脚本太牛B了，如果有正则表达式的基础，你可以很轻松的实现各种各样的js验证器，这个js脚本只是提供一个通用的验证框架，具体的验证规则，以及不能通过验证的时候所产生的动作完全可以定制。好了，言归正传。

 

首先，给需要验证的表单(Form)中的需要加入验证器的input控件加入一定的验证规则，这个例子中是通过给Input控件加入一个自定义的属性来实现的，如下例：

<script src="validate.js" ></script>
<style>
	input.invalid{background: #faa;}
	input.valid{background: #afa;}	
</style>

<form>
	name : <input type="text" name="name" required><br>
	email: <input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$"><br>
	zipcode : <input type="text" name="zipcode" pattern="^\s*\d{5}\s*$"><br>
	unvalidate : <input type="text"><br>
	
	<input type="submit" value="submit query">
</form>

 当你看到required或者pattern时，不要慨叹自己才疏学浅，因为这两个属性是自定义的。从而实现了js脚本跟html的分离。下面是这个牛B的JavaScript脚本：

(
function(){
	if(window.addEventListener) window.addEventListener("load", init, false);
	else if(window.attachEvent) window.attachEvent("onload", init);
		
	function init(){
		for(var i = 0;i < document.forms.length;i++){
			var f = document.forms[i];
			var needsValidation = false;
			for(var j = 0;j < f.elements.length; j++){
				var e = f.elements[j];
				if(e.type != "text") continue;
				var pattern = e.getAttribute("pattern");
				var required = e.getAttribute("required") != null;
				
				if(required && !pattern){
					pattern = "\\S";
					e.setAttribute("pattern", pattern);	
				}	
				
				if(pattern){
					e.onchange = validateOnChange;
					needsValidation = true;
				}
			}
			if(needsValidation) f.onsubmit = validateOnSubmit;	
		}
	}
	
	function validateOnChange(){
		var textfield = this;
		var pattern = textfield.getAttribute("pattern");
		var value = this.value;
		
		if(value.search(pattern) == -1) textfield.className = "invalid";
		else textfield.className = "valid";	
	}
	
	function validateOnSubmit(){
		var invalid = false;
		for(var i = 0; i < this.elements.length;i++){
			var e = this.elements[i];
			if(e.type == "text" && e.onchange == validateOnChange){
				e.onchange();	
				if(e.className == "invalid") invalid = true;
			}
		}
		if(invalid){
			alert(	"The form is incompletely or incorrectly filled out.\n"+
					"Please correct the hightlighted fields and try again.");
			return false;
		}	
	}	
}
)();

 主题的思想是这样，先定义合法和非法时需要做的动作(在这个例子中，只是简单的将input框的背景色改变而已，这个可以通过CSS轻易实现，你也可以弹出警告等来提示用户)，然后，当框中的内容改变时，就尝试去匹配这个input定义的模式(如果有的话),如果不匹配，就以一定的方式来提醒用户。

 

整个验证器的思路非常清晰，代码也很简洁，主要是通过自定义规则可以完成任意的验证方式。

评论

1 楼 abruzzi 2008-12-10  

自己小"顶"一下，如此经典的验证器，哈哈