WEB开发网
开发学院网页设计JavaScript JS form表单提交时的简单验证 阅读

JS form表单提交时的简单验证

 2012-06-04 16:45:07 来源:WEB开发网   
核心提示:* options:{ * pid:"" --- 要验证的input的父id,必须是id,JS form表单提交时的简单验证,写法为:#id * input_array:[ -- input_array是要进行验证的input组件的数组 *

* options:{
* pid:"" --- 要验证的input的父id,必须是id,写法为:#id
* input_array:[ -- input_array是要进行验证的input组件的数组
* {
* name:["#text1","#text2"], -- 必须 一个或多个,input组件的名字,是一个数组(多个组件的用同一个规则验证)
* reg:null, -- 不必须 自定义函数,函数必须返回来true or false
* length:10, -- 不必须 数字长度,type为6时必须传入
* type:[0,1,2...] -- 必须,一个或多个,验证类型
0 代表 非空
1 代表 纯数字
2 代表 email
3 代表 浮点型
4 代表 金钱
5 代表 数字或字母或数字字母混合体
6 代表 长度
7 代表 qq号码
8 代表 手机号码
9 代表 中文
10 代表 邮编
11 代表 字符
12 代表 字符\数字\_开头
13 代表 url
14 代表 自定义
15 代表 通过ajax去验证
* }...
* ]
* }
*@return: result_array 数组 每个元素是一个json字符串格式: {"name":"#name","result":[{"type":1,"re":false}...]}

JS代码:
//{pid:"#form",input_array:[{name:["#name","#content"],reg:v,length:10,type:[1,2]},{name:["#con1"],length:10,type:[1]}],nullrela:1};
/**
  *@author:郑允安
  *@email:[email protected]
  *@version 1.0
  *@param:
  *       options:{
  *					pid:"" --- 要验证的input的父id,必须是id,写法为:#id
  *					input_array:[ -- input_array是要进行验证的input组件的数组	
  *	                              {
  *	  								name:["#text1","#text2"], -- 必须 一个或多个,input组件的名字,是一个数组(多个组件的用同一个规则验证) 
  *                                 reg:null, -- 不必须 自定义函数,函数必须返回来true or false
  *                                 length:10, -- 不必须 数字长度,type为6时必须传入
  *                                 type:[0,1,2...] -- 必须,一个或多个,验证类型 
										  0 代表 非空
										  1 代表 纯数字
										  2 代表 email
										  3 代表 浮点型
										  4 代表 金钱
										  5 代表 数字或字母或数字字母混合体
										  6 代表 长度
										  7 代表 qq号码 
										  8 代表 手机号码
										  9 代表 中文
										  10 代表 邮编
										  11 代表 字符
										  12 代表 字符\数字\_开头
										  13 代表 url
										  14 代表 自定义
										  15 代表 通过ajax去验证
  *                                }...
  *	                            ]
  *				  }
  *@return: result_array 数组 每个元素是一个json字符串格式: {"name":"#name","result":[{"type":1,"re":false}...]}
  * 
  */
	$.extend({
	  inputValidate:function(options) {	
	  	  inputValidateVerion2.options=options;
		  return inputValidateVerion2._startValidate();;
		}
	})		
	var inputValidateVerion2 = {
		options:{
			pid:"",
			input_array:[{name:[],reg:null,length:0,type:[],url:''}]			
		},
		_startValidate:function(){		
			input_obj_array = this._getInputObjsArray(this.options.pid,this.options.input_array);
			result_array=[];
			if(input_obj_array!=null&&input_obj_array.length>0){
				a_len = input_obj_array.length; 								
				for(var i=0;i<a_len;i++){					
					name = input_obj_array[i][0];				
					reg = input_obj_array[i][1];
					len = input_obj_array[i][2];
					type = input_obj_array[i][3];					
					t_len = type.length;
					t_re_json = new StringBuffer();					
					t_re_json_sub = new StringBuffer();					
					for(var j=0;j<t_len;j++){						
						validate.options={type:type[j],reg:reg,value:$(name).val(),length:len};
						result = validate._control();					
						if(result!=null&&result.length>0){
							if(result[1]==false){							  
								t_re_json_sub.append('{');
								t_re_json_sub.append('"type":"');
								t_re_json_sub.append(result[0]);
								t_re_json_sub.append('","re":"');
								t_re_json_sub.append(result[1])	
								t_re_json_sub.append('"');
								t_re_json_sub.append('},');																											
							}
						}					
					}
					if(t_re_json_sub.toString().length>0){
						t_re_json.append('{"name":"');
						t_re_json.append(name);
						t_re_json.append('","result":[');
						t_re_json.append(t_re_json_sub.toString().substring(0,t_re_json_sub.toString().length-1));
						t_re_json.append(']}');
						result_array.push(t_re_json.toString());
					}										
				}				
			}			
			return result_array;
		},
		_getInputObjsArray:function(pid,input_objs){		
			obj_array = [];
			if($.trim(pid)!=""){
				var p_obj = $(pid);
				if(p_obj!=undefined){					
					if(input_objs!=null&&input_objs.length>0){
						len = input_objs.length;						
						for(var i=0;i<len;i++){
							names = input_objs[i].name;
							n_len = names.length;							
							for(var j=0;j<n_len;j++){								 														
							  obj_array.push([names[j],input_objs[i].reg,input_objs[i].length,input_objs[i].type]);
							}
						}					
					}else{
						alert('input_objs is null or length is 0!');
					}					
				}else{
					alert('p_objs is null or undefined!');
				}
			}
			return obj_array;
		}
	};	
	var validate = {		    
			options:{type:1,value:"",length:0,reg:null},
			_control:function(){
				result = [];
				result.push(this.options.type);			
				if(this.options.type==0){
					result.push(this._nullV(this.options.value));
				}else if(this.options.type==1){//数字 测试通过
					result.push(this._numV(this.options.value));
				}else if(this.options.type==2){//email 测试通过
					result.push(this._emailV(this.options.value));
				}else if(this.options.type==3){//浮点型 测试通过
					result.push(this._floatV(this.options.value));
				}else if(this.options.type==4){//金钱 未测试
					result.push(this._moneyV(this.options.value));
				}else if(this.options.type==5){//数字或字母或数字字母混合体 测试通过
					result.push(this._numstrV(this.options.value));
				}else if(this.options.type==6){//长度 测试通过
					result.push(this._lengthV(this.options.value,this.options.length));
				}else if(this.options.type==7){//qq号码 测试通过
					result.push(this._qqV(this.options.value));
				}else if(this.options.type==8){//手机号码 测试通过
					result.push(this._mobileV(this.options.value));
				}else if(this.options.type==9){//中文 测试通过
					result.push(this._chinaV(this.options.value));
				}else if(this.options.type==10){//邮编 测试通过
					result.push(this._postIdV(this.options.value));
				}else if(this.options.type==11){//字符 测试通过
					result.push(this._strV(this.options.value));
				}else if(this.options.type==12){//字符\数字\_开头 测试通过
					result.push(this._beginNumStrV(this.options.value));
				}else if(this.options.type==13){//url 测试通过 
					result.push(this._urlV(this.options.value));
				}else if(this.options.type==14){//自定义 测试通过 
					if($.type(this.options.reg)=='function'){
						result.push(this.options.reg(this.options.value));
					}else{
						alert('reg is not function!');
					}
				}else{
					alert('type is error!');
				}				
				return result;
			},
			_numV:function(value){				
				var pattern = /^[\d]+$/;						
				var re = pattern.test(value);					
				return re;
			},
			_emailV:function(value){
				var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
				var re = pattern.test(value);
				return re;
			},
			_nullV:function(value){
				re = false;
				try{
					if(value!=null&&value!=undefined&&$.trim(value)!=""){
						re=true;
					}
				}catch(e){
				}
				return re;
			},
			_floatV:function(value){
				var pattern = /^[1-9][0-9]*\.[0-9]+$/;
				var re = pattern.test(value);
				return re;
			},
			_moneyV:function(value){
				return false;
			},
			_strV:function(value){
				 var pattern=/^[a-zA-Z]+$/;;
				 var re = pattern.test(value);
 				 return re;
			},
			_beginNumStrV:function(value){
				 var pattern=/^([0-9a-zA-z_]{1})([\w]*)$/;
				 var re = pattern.test(value);				
				 return re;
			},
			_numstrV:function(value){
				 var pattern=/^[A-Za-z0-9]+$/;				
				 var re = pattern.test(value);								
 				 return re;
			},
			_lengthV:function(value,len){
				re = false;				
				if(value!=null&&value!=""&&value.length<=parseInt(len)){
					re = true;
				}				
				return re;				
			},
			_qqV:function(value){
				var pattern = /^[1-9]\d{4,8}$/;
				var re = pattern.test(value);
				return re;
			},
			_mobileV:function(value){
				var pattern = /^0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}$/;
				var re = pattern.test(value);
				return re;
			},
			_chinaV:function(value){
			    var pattern=/^[\Α-\¥]+$/;
				var re = pattern.test(value);
				return re;
			},
			_postIdV:function(value){
				var pattern=/^\d{6}$/;
				var re = pattern.test(value);
				return re;
			},
			_urlV:function(value){
				var pattern=/^(http\:\/\/)?([a-z0-9][a-z0-9\-]+\.)?[a-z0-9][a-z0-9\-]+[a-z0-9](\.[a-z]{2,4})+(\/[a-z0-9\.\,\-\_\%\?\=\&]?)?$/i;
				var re = pattern.test(value);
				return re;
			}
		};
JS util.js源代码:
function StringBuffer() {
	this.__strings__ = [];
}
StringBuffer.prototype.append = function (str) {
	this.__strings__.push(str);
};
StringBuffer.prototype.toString = function () {
	return this.__strings__.join("");
};

Test静态页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="/js/jquery/jquery1.5.js"></script>
<script type="text/javascript" language="javascript" src="/js/util.js"></script>
<script type="text/javascript" language="javascript" src="/js/inputValidateVerion2.js"></script>
</head>
<body>
<div>
	<form id="form">
    	name:<input name="name" id="name" />
        <br/>
        content:<input name="content" id="content"/>
        <br/>
        con1:<input name="con1" id="con1"/>
        <br/>
        <input type="submit" value="提交"/>
    </form>
    <div id="contentDiv">
    
    </div>
</div>
<script>
$(function(){
	$("#form").bind("submit",function(){
		 function v(text){return false;}
		 function v1(text){return true;}
		  var result_array = $.inputValidate({pid:"#form",input_array:[{name:["#name"],reg:v,length:3,type:[0,6]},{name:["#content"],reg:v1,length:5,type:[0,6]},{name:["#con1"],length:10,type:[0,6]}]});
		  if(result_array.length==0){
			  this.submit();			  
		  }else{			
			var len = result_array.length;
			var result_str = new StringBuffer();
			for(var i=0;i<len;i++){
				var r_a = result_array[i];
				var obj = $.parseJSON(r_a);
				name = obj.name;				
				re = obj.result;
				o_len = re.length;
				for(var j=0;j<o_len;j++){
					type = re[j].type;
					b_re = re[j].re;
					result_str.append(" name ... "+name+" type ... "+type + " re ... "+b_re);									
				}					
			}
			$("#contentDiv").text(result_str.toString());	
			return false;
		  }	  
		});
})
</script>
</body>
</html>

Tags:JS form 表单

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接