一个检验form数据合法性的js类-优快云博客

本文原创作品，如需转载请注明来源，作者：姜涛， towerjt@gmail.com

参考了一些其他人的代码，自己写了一个检验form数据合法性的js类

function ValidForm(formObj){
	
	function validateOnChange(){  
        var textfield = this;  
        var pattern = textfield.getAttribute("pattern").toString(); 
        var plen = pattern.length;
//        alert(plen);
        pattern = pattern.replace(/\//g,'');
//        alert(pattern);
        var value = this.value;  
          
//        alert(pattern+'  '+value+'  '+ value.search(pattern));  
        var required = textfield.getAttribute("required") != null;  
        
        if (!required && value.length==0){
        	textfield.className = "valid";
        	return;
        }
        
        if(value.search(pattern) == -1)
        	textfield.className = "invalid";  
        else 
        	textfield.className = "valid";   
    }; 
          
    this.form = formObj;
    
	this.defaultRegExp	= {
    	email : /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
    	cnPhone : /^(\d{3,4}-)\d{7,8}(-\d{1,6})?$/,
    	cnMobile : /^1[3,5]\d{9}$/,
    	yid : /^[a-z][a-z_0-9]{3,}(@yahoo\.cn)?$/,
    	date : /^\d{4}\-[01]?\d\-[0-3]?\d$|^[01]\d\/[0-3]\d\/\d{4}$|^\d{4}年[01]?\d月[0-3]?\d[日号]$/,
    	integer : /^[1-9][0-9]*$/,
    	number : /^[+-]?[1-9][0-9]*(\.[0-9]+)?([eE][+-][1-9][0-9]*)?$|^[+-]?0?\.[0-9]+([eE][+-][1-9][0-9]*)?$|^0$/,
    	currency : /^\d*(.\d{1,2})?$|^0$/,
    	alpha : /^[a-zA-Z]+$/,
    	alphaNum : /^[a-zA-Z0-9_]+$/,
    	urls : /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/,
    	chinese : /^[\u2E80-\uFE4F]+$/,
    	postal : /^[0-9]{6}$/
    };	
    
    this.bind = function(){
    	var needsValidation = false;  
        for(var j = 0;j < formObj.elements.length; j++){  
        	var e = formObj.elements[j];  
        	if(e.type != "text") continue;        	
        	var pattern = this.defaultRegExp[e.getAttribute("pattern")]; 
        	if (!pattern) pattern = e.getAttribute("pattern");
        	e.setAttribute("pattern", 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) formObj.onsubmit = validateOnSubmit;    	
    };
    
    this.doValid = function(){
    	var invalid = false;  
        for(var i = 0; i < formObj.elements.length;i++){  
            var e = formObj.elements[i];  
            if(e.type == "text" && e.onchange == validateOnChange){  
                e.onchange();     
                if(e.className == "invalid") 
                {
                	invalid = true;
                	var tips = e.getAttribute("tips");
                	if (!tips) tips = "输入数据非法";
                	alert('提示 ：' + tips);  
            		return false;  
                }
            }  
        }
        return true;
    };
}

使用方法

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK"></head>
<body>
<script src="validate_obj.js" ></script>                                            
<style>                                                                         
    input.invalid{background: #faa;}                                            
    input.valid{background: #afa;}                                              
</style>                                                                        
                                                                                
<form id="form1" name="form1">                                                                          
    name : <input type="text" name="name" required tips="名字非空"><br>                         
    email: <input type="text" name="email" pattern="email" tips="邮件地址:towerjt@gmail.com"><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>

<script language="javascript">
	var vf = new ValidForm(document.getElementById('form1'));	
	vf.bind();	
</script>

<input type="button" value="增加" onClick="alert(vf.doValid());"/>
</body>
</html>