位置:主页 > IT技术新闻 >

jquery 最简单易用的表单验证插件

作者:admin时间:2018-09-16
复制代码 代码如下:/* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :true, isAlert = typeof arguments[2] ==="boolean" ? arguments[2] :false, //验证规则 rule = { // 正则规则 "eng" : /^[A-Za-z]+$/, "chn" :/^[u0391-uFFE5]+$/, "mail" : /w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/, "url" : /^http[s]?://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/, "currency" : /^d+(.d+)?$/, "number" : /^d+$/, "int" : /^[0-9]{1,30}$/, "double" : /^[-+]?d+(.d+)?$/, "username" : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/, "password" : /^(w){6,20}$/, "safe" : />|<|,|[|]|{|}|?|/|+|=|||'|\|"|:|;|~|!|@|#|*|$|%|^|&|(|)|`/i, "dbc" : /[a-zA-Z0-9!@#¥%^&*()_+{}[]|:"';.,/?<>`~ ]/, "qq" : /[1-9][0-9]{4,}/, "date" : /^((((1[6-9]|[2-9]d)d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]d|3[01]))|(((1[6-9]|[2-9]d)d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]d|30))|(((1[6-9]|[2-9]d)d{2})-0?2-(0?[1-9]|1d|2[0-8]))|(((1[6-9]|[2-9]d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))$/, "year" : /^(19|20)[0-9]{2}$/, "month" : /^(0?[1-9]|1[0-2])$/, "day" : /^((0?[1-9])|((1|2)[0-9])|30|31)$/, "hour" : /^((0?[1-9])|((1|2)[0-3]))$/, "minute" : /^((0?[1-9])|((1|5)[0-9]))$/, "second" : /^((0?[1-9])|((1|5)[0-9]))$/, "mobile" : /^(((d{2,3}))|(d{3}-))?13d{9}$/, "phone" : /^[+]{0,1}(d){1,3}[ ]?([-]?((d)|[ ]){1,12})+$/, "zipcode" : /^[1-9]d{5}$/, "bodycard" : /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5[0-4])|(6[1-5])|71|(8[12])|91)d{4}((19d{2}(0[13-9]|1[012])(0[1-9]|[12]d|30))|(19d{2}(0[13578]|1[02])31)|(19d{2}02(0[1-9]|1d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))d{3}(d|X|x)?$/, "ip" : /^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$/, "file": /^[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/, "image" : /.+.(jpg|gif|png|bmp)$/i, "word" : /.+.(doc|rtf|pdf)$/i, // 函数规则 "eq": function(arg1,arg2){ return arg1==arg2 ? true:false;}, "gt": function(arg1,arg2){ return arg1>arg2 ? true:false;}, "gte": function(arg1,arg2){ return arg1>=arg2 ? true:false;}, "lt": function(arg1,arg2){ return arg1<arg2 ? true:false;}, "lte": function(arg1,arg2){ return arg1<=arg2 ? true:false;} }, //简单验证提示信息后缀 msgSuffix = { "eng" : "只能输入英文" , "chn" : "只能输入汉字", "mail" : "格式不正确", "url" : "格式不正确", "currency" : "数字格式有误", "number" : "只能为数字", "int" : "只能为整数", "double" : "只能为带小数的数字", "username" :"只能为数字和英文及下划线和.的组合,开头为字母,4-20个字符", "password" : "只能为数字和英文及下划线的组合,6-20个字符", "safe" : "不能有特殊字符", "dbc" : "不能有全角字符", "qq" : "格式不正确", "date" : "格式不正确", "year" : "不正确", "month" :"不正确", "day" : "不正确", "hour" : "不正确", "minute" :"不正确", "second" :"不正确", "mobile" : "格式不正确", "phone" : "格式不正确", "zipcode" : "格式不正确", "bodycard" : "格式不正确", "ip" : "IP不正确", "file": "类型不正确", "image" : "类型不正确", "word" : "类型不正确", "eq": "不等于", "gt": "不大于", "gte": "不大于或等于", "lt": "不小于", "lte": "不小于或等于" }, msg = "", formObj = $(this) , checkRet = true, isAll, ***name = function(namestr){ return "***_" + namestr.replace(/([a-zA-Z0-9])/g,"-$1"); }, //规则类型匹配检测 typeTest = function(){ var result = true,args = arguments; if(rule.hasOwnProperty(args[0])){ var t = rule[args[0]], v = args[1]; result = args.length>2 ? t.apply(arguments,[].slice.call(args,1)):($.isFunction(t) ? t(v) :t.test(v)); } return result; }, //错误信息提示 ****** 自定义修改 ****** showError = function(fieldObj,filedName,warnInfo){ checkRet = false; fieldObj.css("background","#FFDFDD"); var ***Obj = $("#"+***name(filedName)); if(***Obj.length>0) ***Obj.remove(); var ***Position = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1); ***Position.after("<span style='color:#F06' id='"+***name(filedName)+"'> "+warnInfo+" </span>"); if(isAlert && isAll) msg += "n" + warnInfo; //if(isAlert && !isAll) alert(warnInfo); }, //正确信息提示 ****** 自定义修改 ****** showRight = function(fieldObj,filedName){ fieldObj.css("background","#CCFFCC"); var ***Obj = $("#"+***name(filedName)); if(***Obj.length>0) ***Obj.remove(); var ***Position = fieldObj.next().length>0 ? fieldObj.nextAll().eq(this.length-1):fieldObj.eq(this.length-1); ***Position.after("<span style='color:#0C0' id='"+***name(filedName)+"'> 正确 </span>"); }, //匹配对比值的提示名 findTo = function(objName){ var find; $.each(items, function(){ if(this.name == objName && this.******){ find = this.******; return false; } }); if(!find) find = $("[name='"+objName+"']")[0].name; return find; }, //单元素验证 fieldCheck = function(item){ var i = item, field = $("[name='"+i.name+"']",formObj[0]); if(!field[0]) return; var warnMsg,fv = $.trim(field.val()),isRq = typeof i.require ==="boolean" ? i.require : true; if( isRq && ((field.is(":radio")|| field.is(":checkbox")) && !field.is(":checked"))){ warnMsg = i.message|| i.****** + "没有选择"; showError(field ,i.name, warnMsg); }else if (isRq && fv == "" ){ warnMsg = i.message|| i.****** + ( field.is("select") ? "没有选择" :"不能为空" ); showError(field ,i.name, warnMsg); }else if(fv != ""){ if(i.min || i.max){ var len = fv.length, min = i.min || 0, max = i.max; warnMsg = i.message || (max? i.****** + "长度范围应在"+min+"~"+max+"之间":i.****** + "长度应大于"+min); if( (max && (len>max || len<min)) || (!max && len<min) ){ showError(field ,i.name, warnMsg); return; } } if(i.type){ var matchVal = i.to ? $.trim($("[name='"+i.to+"']").val()) :i.value; var matchRet = matchVal ? typeTest(i.type,fv,matchVal) :typeTest(i.type,fv); warnMsg = i.message|| i.****** + msgSuffix[i.type]; if(matchVal && i.******) warnMsg += (i.to ? findTo(i.to) +"的值" :i.value); if(!matchRet) showError(field ,i.name, warnMsg); else showRight(field,i.name); }else{ showRight(field,i.name); } }else if (isRq){ showRight(field,i.name); } }, //元素组验证 validate = function(){ $.each(items, function(){isAll=true; fieldCheck(this);}); if(isAlert && msg != ""){ alert(msg); msg = ""; } return checkRet; }; //单元素事件绑定 $.each(items, function(){ var field = $("[name='"+this.name+"']",formObj[0]); if(field.is(":hidden")) return; var obj = this,toCheck = function(){ isAll=false; fieldCheck(obj);}; if(field.is(":file") || field.is("select")){ field.change(toCheck); }else{ field.blur(toCheck); } }); //提交事件绑定 if(isBindSubmit) { $(this).submit(validate); }else{ return validate(); } } }); })(jQuery); 参数及说明: ------------------- 配置参数:---------------------- -------- 表单 -------- valid(fileds,isBindSubmit,isAlert) 参数一为表单项数组(Json方式),必需 参数二为表单是否为手动调用验证结果,默认为true,即为自动验证submit事件,可选; 参数三为验证信息采用Alert提示方式,默认为否,可选。 -------- 表单项数组 -------- name: 表单域的name,必需 type: 验证类型,可选 ******: 简单提示消息,只输入域的中文名 [推荐] message: 完整的提示消息,替代简单提示消息 require:是否必填,默认为true,即必填,false为非必填,可选 to: 匹配值对比,对象的name,可选 value: 直接匹配值对比,有to则该值被忽略,可选 min:最小长度,可选 max:最大长度,可选 ajax: 为取得异步验证的结果的地址,可选 ****** type验证类型如下: ****** eng: 英文 chn: 汉字 mail: 邮箱 url: 网址 currency: 货币 number: 数字 int: 整数 double: 浮点数 username:数字和英文及下划线和.的组合,开头为字母,4-20个字符 password: 数字和英文及下划线的组合,6-20个字符 safe:不含特殊字符 dbc: 含全角字符(汉字除外) qq: 5-9位数字 date: 时间 year: 年 month:月 day: 日 hour: 小时 minute:分 second 秒 mobile:手机 phone:电话 zipcode: 邮编 bodycard: 身份证,支持15位、18位,x字母 ip: IP file: 文件类型 image: 图片文件类型 word: 文档文件类型 **** 以下类型,需要有匹配对象或值 **** eq: = gt: > gte:>= lt: < lte:<= 怎么个简单容易法??? 看代码: 复制代码 代码如下: $(function(){ $("form").valid([ //验证选择 { name:"checkbox",******:"多选" }, //验证必填,只要不为空 { name:"username",******:"用户名" }, //非必填,邮箱类型 { name:"email",type:"mail",******:"邮箱",require:false } ]); }) 演示代码打包下载 http://xiazai.jb51.net/201002/yuanma/jquery_checkform.rar

本文源自: AG环亚娱乐

IT技术新闻

联系我们