基于jquery的表单验证插件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	<div class="wrap">
		<input type="text"  data-vertify="require,mobile|email" data-vermax="100" data-vermin="6"  />
	</div>
	
	<button class="btn">验证</button>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	//插件部分
	;(function(){
		//这里是所有验证的函数，如果需要更多的验证，可以自己添加
		var _check = {
			mobile:function(value){
				var reg = /^(13|14|15|17|18|19)[0-9]{9}$/;
				if(!reg.test(value)){
					return {code:-1,msg:"手机格式不符合"};
				}else{
					return {code:1};
				}
			},
			require:function(value){
				var str = value.trim();
				if(str){
					return {code:1};
				}else{
					return {code:-1,msg:"这是必填字段"};
				}
			},
			email:function(value){
				 var reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
				 if(!reg.test(value)){
				 	return {code:-1,msg:"邮箱格式不符合"};
				 }else{
				 	return {code:1};
				 }
			}
		}
		
		function _verify($dom){
			var data = $dom.data("vertify")||'';
			var max = $dom.data("vermax") || '';
			var min = $dom.data("vermin") || '';
			var arr = data.split(',');
			var value = $dom.val();

			//验证长度
			if(max && value.length > max){
				return {code:-1,msg:"最大长度为" + max};
			}
			if(min && value.length < min){
				return {code:-1,msg:"最小长度为" + min};
			}
			
			for(var i = 0; i < arr.length; i++){
				var item = arr[i] || '';
				if(item.indexOf("|") !== -1){
					var ands = item.split("|");
					var hasTrue = false;
					var msg = [];
					for(var j = 0; j < ands.length; j++){
						if(_check[ands[j]]){
							var res = _check[ands[j]](value) || {};
							if(res.code == 1){
								hasTrue = true;	
								
							}else{
								msg.push(res.msg);
							}
					   }
					}
					
					if(!hasTrue){
						//全部为false
						return {code:-1,msg:msg.join("且")};
					}
					
				}else{
					if(_check[item]){
						var res = _check[item](value) || {};
						if(res.code == -1){
							return res;		
						}
					}
				}

			}
			
	
			return {code:1,msg:"验证成功"};
		}
		
		$.fn.extend({
	 	formVerify:function(opt){
	 		var that = this;
	 
            var defau = {
                success:function(){},
                error:function(){}
            }
            opt = $.extend(true, defau, opt);
            
            if(opt.dom){
	 			var $dom = that.find(opt.dom);
	            var flag = true;
	            $dom.each(function(index,ele){
	            	
	            	var res =  _verify($(ele)) || {};
	            	if(res.code == -1){
	            		res.dom = $(ele);
	            		opt.error(res);
	            		flag = false;
	            		return false;
	            	}
	            });
	            
	            if(flag){
	            	opt.success();
	            }
	 		}else{
			  var res =	_verify(that) || {};
			  if( res.code == -1){
			  	    res.dom = that;
			  		opt.error(res);
			  }else{
			  	opt.success();
			  }
	 		}
	 	}
	 });
	})();
	 
	 
	 //开始使用插件
	 
	 
	var $wrap =  $(".wrap");
	 
	$(".btn").on("click",function(){
			$wrap.formVerify({
				dom:"input",  //jquery选择器，查找$wrap中需要验证的dom，可以不传，不传就是验证自己
				success:function(){
					console.log("成功");
					alert("成功");
				},
				error:function(err){
					console.log(err);
					alert(err.msg)
				}
			});
	});
	
	/*//不传dom时
	$("input").formVerify({
		success:function(){
			console.log("成功");
			alert("成功");
		},
		error:function(err){
			console.log(err);
			alert(err.msg)
		}
	})*/
	
	
	//data-vertify="require,mobile|email"  表示  : 字段为必须，并且为手机号码或者邮箱
	//data-vermax="100"  最大长度
	//data-vermin="6"  最小长度
</script>
</html>
基于jquery的表单验证插件

猜你喜欢
