JS form表单提交时的简单验证
2012-06-04 16:45:07 来源:WEB开发网* 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:zhengyun_an@163.com *@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>
赞助商链接