<!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>