表单验证

<pre name="code" class="javascript">//在线demo:    http://www.hui12.com/nbin/csdn/jsInput/demo.html/*验证类型testName: "验证用户",testPassword: "密码",testPhone: "手机号码",testQQ: "验证QQ",testLength: "验证是否在指定长度内",//3个参数，最小和最大testEmail:"验证邮箱",testSame:"两个元素比较是否相同",//接受两个参数testWX:"验证微信昵称",testPlane:"验证座机",testManCard:"验证身份证"*//*使用方法 * 创建实例对象 var a = new testInput(); * 传入dom-JQ对象和对应的检测的方法 * a.add( [$(".testName"),"testName"] ),以数组形式 * 可以接受2次数组多传 a.add([[$(".testName"),"testName"], [$(".testName"),"testName"]]) * 检测方法 * a.get( $(".testName") )获取单个结果，返回结果为JSON{result:'结果', text:'提示'} * a.get( [$(".testName"), $(".testName")] ) 获取指定结果返回结果为数组[{obj:'',result:'',txt:''}, {obj:'',result:'',txt:''}] * a.get()如果不传入参数，则获取所有结果，不包含特殊验证 testLength, testSame * 特殊检测 * 检测是字节长度是否在指定范围内a.get( [$(".testLength"), min, max] )最小值最大值，数字类型 * 检测两个输入内容是否一致(2次密码确认)a.get([$(".testSama"), $(".testSama"), "same"])前两个为比较对象，第三个为固定必填参数 */(function(window, $){var proto = {testName: function($obj){var str = $obj.val();if( !this.checkNormal(str) ){return {result: false,txt: "由字母，数字、下划线组成"}};if( !this.checkLength(str,6,20) ){return {result: false,txt: "长度在6-20个字符以内"}};if( !this.checkFirstA(str) ){return {result: false,txt: "第一个字符不能为数字"}};return {result: true,txt: ""}},testPassword: function($obj){return this.testName($obj);},testPhone: function($obj){var str = $obj.val();var re = /^1\d{10}$/;if( re.test(str) ){return {result: true,txt: ""}}else{return {result: false,txt: "手机号码由11位数字组成"}}},testQQ: function($obj){var str = $obj.val();var re = /^\d{5,10}$/;if( re.test(str) ){return {result: true,txt: ''}}else{return {result: false,txt: "5~10位数字"}}},testLength: function($obj, a, b){if( this.checkLength($obj.val(),a,b) ){return {result: true}}else{return {result: false}}},testEmail: function($obj){var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;var str = $obj.val();if( re.test(str) ){return {result: true,txt: ""};}else{return {result: false,txt: "邮箱格式不正确"}};},testSame: function($obj1, $obj2){if( $obj1.val() == $obj2.val() ){return {result: true,txt: ""}}else{return {result: false,txt: "不一致"}}},testWX: function($obj){var str = $obj.val();var reg = /^[a-z_\d]+$/;if( reg.test(str) ){return {result: true,txt: ""};}else{return {result: false,txt: ""}}},testPlane: function($obj){var str = $obj.val();var reg = /^\d{3,4}-\d{5,8}$/;if( reg.test(str) ){return {result: true,txt: ""}}else{return {result: false,txt: "格式为:010-1234567"}}},testManCard: function($obj){var str = $obj.val();var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;if( reg.test(str) ){return {result: true,}}else{return {result: false,text: "请输入正确的身份证号码"}}},/* * 检测方法 */checkEmpty: function(str){if( str.trim() == '' ){return false;}else{return true;}},//检测第一个字母是否为数字checkFirstA: function(str){var first = str.charAt(0);if( /\d/.test(first) ){return false;}else{return true;}},//检测数字+字母checkNormal: function(str){ var reg = /^(([a-z]+[0-9]+)|([0-9]+[a-z]+))[a-z0-9]*$/i; if( reg.test(str) ){ return true; }else{ return false; }},//检测是否在规范长度内checkLength: function(str,a,b){var min = a || 6;var max = b || 20;var length = str.length;if( length>=a && length <= b ){return true;}else{return false;}},//add: function(arr){!this.cache && (this.cache = []);var isTwo = $.isArray(arr[0]);if( isTwo ){this.cache = this.cache.concat(arr);}else{this.cache.push(arr);};return this;},get: function(){var This = this;var args = arguments;if( args.length === 0 ){//检测所有， 返回数组结果var tmp = [];$.each(This.cache, function(i, val) {var newArr = [].concat(val);newArr.splice(1,1);tmp.push( newArr );});return merges(tmp,10);}else{if( $.isArray(args[0]) ){//[obj,obj,obj]var tmp = [];//1.一个检测，带参数2，3[obj,2,3]//2、一个检测，和另外一个是否相等[obj,obj,'same']//3、多个检测，返回多个结果.[obj,obj]，又可能出现上面2种情况if( !isNaN(args[0][1]) || !isNaN(args[0][2]) ){tmp.push(args[0]);return merges(tmp, 1);};if( args[0][2] == 'same' ){args[0].splice(2,1);tmp.push(args[0]);return merges(tmp, 1);};$.each(args[0], function(i, val) {if( $.isArray(val) ){tmp.push(val);}else{tmp.push([val]);};});return merges(tmp);}else{//常规return merges([[args[0]]], 1);}};function merges(arr, one){//arr = [ [obj,a,b], [obj] ]var result = [];$.each(arr, function(i, val){var oldName = val[0][0];var tName;$.each(This.cache, function(i2,val2) {if( oldName == val2[0][0] ){tName = val2[1];return false;};});var r;if( one == 10){if( tName == "testLength" || tName == "testSame" ){r = {tName: "请单独获取"};}else{r = This[tName].apply(This, val);};}else{r = This[tName].apply(This, val);};if( one==1 ){result.push(r);return false;};r.obj = val[0];result.push( r );});return one==1 ? result[0] : result;};}};function Test(){return this;};Test.prototype = proto;Test.prototype.constructor = Test;window.Test = Test;})(window, jQuery)

主要说说add和get方法实现的思路

表单和规则对应，采用数组形式 【表单，规则】

add: function(arr){!this.cache && (this.cache = []);var isTwo = $.isArray(arr[0]);if( isTwo ){this.cache = this.cache.concat(arr);}else{this.cache.push(arr);};return this;}

cache用来保存值

isTwo用来判断是否是2次数组，2次数组传多个值

get方法

var This = this;var args = arguments;if( args.length === 0 ){//检测所有， 返回数组结果var tmp = [];$.each(This.cache, function(i, val) {var newArr = [].concat(val);newArr.splice(1,1);tmp.push( newArr );});return merges(tmp,10);}

如果没有值，则获取所有结果，

所有执行都是在merges函数里面执行，merges第一个参数为检测元素，结构为2次数组，[ [obj,a,b], [obj] ]，因为有特殊检测带有参数，所有里面一次数组实际上为检测元素和要用的参数值，第二个参数为特殊参数，后文用来做判断是否是全部检测，

用splice截取第二个参数，第二个参数为检测方法，后面用不到，截取后的数组为 【dom，参数】

}else{if( $.isArray(args[0]) ){//[obj,obj,obj]var tmp = [];//1.一个检测，带参数2，3[obj,2,3]//2、一个检测，和另外一个是否相等[obj,obj,'same']//3、多个检测，返回多个结果.[obj,obj]，又可能出现上面2种情况if( !isNaN(args[0][1]) || !isNaN(args[0][2]) ){tmp.push(args[0]);return merges(tmp, 1);};if( args[0][2] == 'same' ){args[0].splice(2,1);tmp.push(args[0]);return merges(tmp, 1);};$.each(args[0], function(i, val) {if( $.isArray(val) ){tmp.push(val);}else{tmp.push([val]);};});return merges(tmp);}else{//常规return merges([[args[0]]], 1);}};

$.isArray(args[0]) 用来判断是否是数组，不是数组则为dom对象，执行merges([[args[0]]], 1)，第一个参数设置为2次数组，原因上文有提到，后面的1为后面结果做判断，1直接返回json结果

为真的时候，里面又有三种情况，和备注的相对应

function merges(arr, one){//arr = [ [obj,a,b], [obj] ]var result = [];<span style="white-space:pre"></span>//返回结果$.each(arr, function(i, val){var oldName = val[0][0];<span style="white-space:pre"></span>//val为1次数组，得到源生dom对象var tName;<span style="white-space:pre"></span>//执行方法名字$.each(This.cache, function(i2,val2) {if( oldName == val2[0][0] ){<span style="white-space:pre"></span>//如果传入dom和cache已保存的dom一样，则获取dom执行方法tName = val2[1];return false;};});var r;if( one == 10){<span style="white-space:pre"></span>//全部获取，对特殊检测做特殊处理if( tName == "testLength" || tName == "testSame" ){r = {tName: "请单独获取"};}else{r = This[tName].apply(This, val);};}else{<span style="white-space:pre"></span>//获取单个检测结果r = This[tName].apply(This, val);};if( one==1 ){<span style="white-space:pre"></span>//如果为1，则只单个检测，结果为[{}]，然后跳出result.push(r);return false;};r.obj = val[0];<span style="white-space:pre"></span>//没有执行1的判断，说明是多个元素检测，手动增加一个obj属性，方便返回值查询，结果为[{},{}...]result.push( r );});return one==1 ? result[0] : result;<span style="white-space:pre"></span>//针对传入参数返回不同结果};