表单验证

最新推荐文章于 2024-04-30 08:58:14 发布

nbin斌

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量612

点赞数

分类专栏： javascript 文章标签： js 前端web开发表单 input

本文链接：https://blog.csdn.net/nbin2008/article/details/48720091

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<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>//针对传入参数返回不同结果
};