1.需要使用的JS验证文件
/* 使用方法 例:<input type="text" name="id" id="id" tag="*,intege" errormsg="自定义提示" /> -------------------------------------------------------------- 表单验证方法 例: $("form").submit(function () { return formverify(); }); ______________________________________________________________ -----验证字典----- isnull--可空 *--非空 normal--正常字符 num--数字类型 intege--正整数 double--小数 double2--2位小数 mobile--手机号码 telormob--电话或手机 tel--电话号码的函数(包括验证国内区号,国际区号,分机号) email--邮箱 letter--字符串 letter_u--大写字母 letter_u--小写字母 6--12--6--12个字符 ptp--验证密码是否一致 color--验证颜色值 #FFFFFF url--验证URL cn--验证中文 zipcode--验证邮政编码 date--日期验证 qq--QQ验证 idcard--身份证 ip4--IP地址 img--图片 licecar--车牌 ____________________________________________________________ 说明: 如要新增验证方法,请参考自己添加 如发现错误,请主动纠正 请多多改进 -----------生肯油 */ //载入页面，加载默认样式 $(function () { $("[tag]:not(select)").blur(function () { if (!verify($(this))) { TipMessage(this); } else { DelMessage(this, true); } }); $("select[tag]").change(function () { if (!verify($(this))) { TipMessage(this); } else { DelMessage(this, true); } }); $("[tag]").each(function (index) { if ($(this).attr("tag").indexOf("*") > -1 && $(this).val() == "") { $(this).after("<span class='BubblingError' style='color:red;'> *</span>"); } }) }); errmessage = ""; //添加错误提示信息 function TipMessage(obj) { DelMessage(obj, false); //判断是否存在自定义提示 if ($(obj).attr("errormsg") == undefined) { $(obj).after("<span class='BubOnError' errormsg=" + errmessage + "></span>"); } else { $(obj).after("<span class='BubOnError' errormsg=" + $(obj).attr("errormsg") + "></span>"); } tooltip(); } function DelMessage(obj, istrue) { $(obj).nextAll(".BubOnError,.BubOnCorrect,.BubOnShow,.BubblingError").remove(); if ($(obj).val() != "" && istrue) { $(obj).after("<span class='BubOnCorrect'></span>"); } } function tooltip() { xOffset = 15; yOffset = 15; $(".BubOnError").unbind("hover"); //清除hover绑定事件，防止绑定多次 $(".BubOnError").hover(function (e) { $("body").append("<p id='tooltip'>" + $(this).attr("errormsg") + "</p>"); $("#tooltip").css("top", "0px").css("left", "0px").fadeIn("fast"); var toolheight = $("#tooltip").height(); var toolwidth = $("#tooltip").width(); $("#tooltip").css("top", (e.pageY - yOffset - toolheight) + "px").css("left", (e.pageX - xOffset - $("#tooltip").width()) + "px") }, function () { $("#tooltip").remove(); }) } //点击提交按钮，检查所有的待验证对象是否符合要求 function formverify() { var flag = true; $("[tag]").each(function () { if (!verify($(this))) { TipMessage(this); flag = false; } }); return flag; } //验证对象是否符合要求 function verify(obj) { var flag = true; var typestr = obj.attr("tag").split(","); var objValue = $.trim(obj.attr("value")); for (var i = 0; i < typestr.length; i++) { if (typestr[i] == "isnull" && objValue == "") break; //可以为空的时候不继续验证 else if (typestr[i] == "isnull" && objValue != "") continue; if (tagcheck(typestr[i], objValue)) {//满足验证要求 } else { flag = false; break; } } return flag; } //判断验证对象的值是否满足验证要求 function tagcheck(type, vals) { switch (type) { case "*": //非空 errmessage = "该项不允许为空！"; return vals != ""; case "num": //数字类型 errmessage = "该项应为数字类型！"; return !isNaN(vals); case "intege": //整数 errmessage = "该项应为有效整数！"; var rgexp = /^([0]|[1-9][0-9]*)$/; return rgexp.test(vals); case "select": //下拉列表必选 errmessage = "未选择"; var rgexp = /^([1-9][0-9]*)$/; return rgexp.test(vals); case "double": //小数 var rgexp = /^((([0-9]|[1-9][0-9]*)\.[0-9]+)|([0]|[1-9][0-9]*))$/; errmessage = "该项应为有效的正整数或正浮点数！"; return rgexp.test(vals); case "double2": //2位小数 var rgexp = /^((([0-9]|[1-9][0-9]*)\.[0-9]{1,2})|([0]|[1-9][0-9]*))$/; errmessage = "该项应为有效的正整数或两位小数的浮点数！"; return rgexp.test(vals); case "mobile": //手机号码 var rgexp = /^1[3-9]\d{9}$/; errmessage = "该项应为有效的手机号码！"; return rgexp.test(vals); case "tel": //电话号码的函数(包括验证国内区号,国际区号,分机号) var rgexp = /^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/; errmessage = "该项应为有效的电话号码！"; return rgexp.test(vals); case "telormob": //手机电话号码 var rgexp = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$)|((^(1[3-9]\d{9})?$))/; errmessage = "该项应为有效的电话号码！"; return rgexp.test(vals); case "email": //邮箱 var rgexp = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; errmessage = "该项应为有效的邮箱！"; return rgexp.test(vals); case "normal": //正常字符 字母、数字、下划线 var rgexp = /^(\w){1,20}$/; errmessage = "该项应由字母、数字、下划线组成的字符串！"; return rgexp.test(vals); case "letter": //字符串 var rgexp = /^[A-Za-z]+$/; errmessage = "该项应为有效的字符串！"; return rgexp.test(vals); case "letter_u": //大写字母 var rgexp = /^[A-Z]+$/; errmessage = "该项应为大写字母！"; return rgexp.test(vals); case "letter_u": //小写字母 var rgexp = /^[a-z]+$/; errmessage = "该项应为小写字母！"; return rgexp.test(vals); case "6-12": //6-12个字符 var rgexp = /[^\s]{6,12}/; errmessage = "该项应为6-12个有效字符！"; return rgexp.test(vals); case "ptp": //验证密码是否一致 var pwd1 = $("#pwd").val(); var pwd2 = $("#pwdconfirm").val(); if (pwd1 == pwd2) { return true; } else { return false; } case "color": //验证颜色值 #FFFFFF var rgexp = /^#[a-fA-F0-9]{6}$/; errmessage = "该项应为颜色值！"; return rgexp.test(vals); case "url": //验证URL var rgexp = /^http[s]?:\/\/([\w-]+\.)+[\w-]+([\w-.\/?%&=]*)?$/; errmessage = "该项应为有效的URL！"; return rgexp.test(vals); case "cn": //验证中文 var rgexp = /^[\u4E00-\u9FA5\uF900-\uFA2D]+$/; errmessage = "该项应为有效的中文！"; return rgexp.test(vals); case "zipcode": //验证邮政编码 var rgexp = /^\d{6}$/; errmessage = " 该项应为有效的邮政编码！"; return rgexp.test(vals); case "date": //日期验证 var rgexp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/; errmessage = "该项应为有效日期！"; return rgexp.test(vals); case "qq": //QQ验证 var rgexp = /^[1-9]\d{4,12}$/; errmessage = "该项应为有效的QQ号码！"; return rgexp.test(vals); case "idcard": //身份证 var rgexp = /^\d{15}(\d{2}[0-9xX])?$/; errmessage = "该项应为有效的身份证号码！"; return rgexp.test(vals); case "ip4": //IP地址 var rgexp = /^(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)$"/ errmessage = "该项应为有效的IP地址！"; return rgexp.test(vals); case "img": //图片 var rgexp = /(.*)\.(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/; errmessage = "该项应为图片！"; return rgexp.test(vals); case "licecar": //车牌验证 var rgexp = /^[\u4E00-\u9FA5\uF900-\uFA2D]{1}[A-Z]{1}[A-Z0-9]{5}$/; errmessage = "该项应为有效车牌号(例：粤B12345)！"; return rgexp.test(vals); case "nameCheck": //名称验证 var rgexp = /^([\u4E00-\u9FA5\uF900-\uFA2D]|\w){1,20}$/; errmessage = " 该项应为1~20个字符，可使用中文、字母、数字、下划线！"; return rgexp.test(vals); case "shortNameCheck": var rgexp = /^([\u4E00-\u9FA5\uF900-\uFA2D]|\w){1,10}$/; errmessage = " 该项应为1~10个字符，可使用中文、字母、数字、下划线！"; return rgexp.test(vals); case "nameCheckF": //名称验证 var rgexp = /^([\u4E00-\u9FA5\uF900-\uFA2D]|\w){1,50}$/; errmessage = " 该项应为1~50个字符，可使用中文、字母、数字、下划线！"; return rgexp.test(vals); case "nameCheckE": //名称验证 var rgexp = /^\w{1,20}$/; errmessage = " 该项应为1~20个字符，可使用字母、数字、下划线！"; return rgexp.test(vals); case "timeCheck": //时间验证 var rgexp = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; errmessage = " 该项应为有效的时间：如2013-12-12！"; return rgexp.test(vals); case "maxlen": //验证字长度 var len = vals.length; errmessage = "无效长度"; if (len > 0 && len < 50) { return true; } else { return false; } default: return false; } }
2.需要使用的CSS样式文件
body { } /*冒泡提示*/ .BubOnShow { background: url( 'img/onShow.gif' ) no-repeat 0 -0px; padding-left: 25px; font-size: 12px; vertical-align: middle; display:inline-block; height:22px; } .BubOnCorrect { background: url( 'img/onCorrect.gif' ) no-repeat 0 -0px; padding-left: 25px; font-size: 12px; vertical-align: middle; display:inline-block; height:22px; } .BubOnError { background: url( 'img/onError.gif' ) no-repeat 0 -0px; padding-left: 25px; font-size: 12px; vertical-align: middle; display:inline-block; height:22px; } #tooltip { background: none repeat scroll 0 0 #F7F5D1; border: 1px solid #333333; color: #333333; display: none; padding: 2px 5px; position: absolute; max-width:100px; _width: expression( this.scrollWidth > 100 ? "100px" : "auto" ); }
3.前台调用的方式
<h1>验证测试</h1>
<asp:TextBox ID="ShowInformation" runat="server" tag="*,mobile"></asp:TextBox>
<asp:Button ID="btn_Save" runat="server" Text="提交" OnClientClick="return formverify()" />
4.应用到的图片
onCorrect.gif 
onError.gif 
onShow.gif
