邱俊的空间

Simple is beautiful.
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

[导入]JavaScript高级验证器

Posted on 2008-12-30 21:08  abruzzi  阅读(217)  评论(0编辑  收藏  举报


作者: abruzzi  链接:http://abruzzi.javaeye.com/blog/289441  发表时间: 2008年12月09日

声明:本文系JavaEye网站发布的原创博客文章,未经作者书面许可,严禁任何网站转载本文,否则必将追究法律责任!

首先说一下,这个例子不是我原创的,例子本身来自《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定义的模式(如果有的话),如果不匹配,就以一定的方式来提醒用户。

 

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