通用jquery页面验证
页面通过给input 标签设置样式或者属性,即可实现所有页面的验证,customValidate方法并支持自己补充验证!
验证包括:必输项,只能输入数字, 输入数字并设定小数最大位数,下拉框必选,复选框必选,电话格式,手机格式,电话或手机,邮箱格式,邮编格式等验证!
页面的html 代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="css/validate.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .centertable { border: 1px solid #D0D0D0; border-collapse: collapse; font-size: 14px; width: 100%; table-layout: word-wrap:break-word; word-break: break-all; } .centertable th { border-collapse: collapse; /*border:solid 1px #0058a3;*/ border: solid 1px #D0D0D0; text-align:right; height:30px; font-weight:normal; } .centertable td { border-collapse: collapse; /*border:solid 1px #0058a3;*/ border: solid 1px #D0D0D0; text-align:left; width:70%; height:30px; } </style> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/Validate.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div style="width:700px; margin:0 auto;"> <!-- 只能输入数字和小数点--> <div style="text-align:center;">常用的js验证总结</div> <table cellpadding="0" cellspacing="0" class="centertable"> <tr> <th> <!-- 只能输入数字--> 只能输入数字:</th> <td> <asp:TextBox ID="txtCount" runat="server" onkeyup="this.value=this.value.replace(/\D/g,'')" onblur="this.value=this.value.replace(/\D/g,'')" CssClass="mustInput" ToolTip="产品名称"></asp:TextBox> </td> </tr> <tr> <th> 输入数字并指定小数点最大位数:</th> <td> <asp:TextBox ID="txtNumberAndPoint" runat="server" onkeyup="checkNumberPointByUp(this,2);" onblur="checkNumberPointByBlur(this,2);" CssClass="mustInput" ToolTip="价格"></asp:TextBox> </td> </tr> <tr> <th> 公司类型:</th> <td> <asp:DropDownList ID="drpCompany" runat="server" CssClass="mustDrp" ToolTip="公司类型"> <asp:ListItem Value="-1">请选择</asp:ListItem> <asp:ListItem Value="0">国企</asp:ListItem> <asp:ListItem Value="1">事业单位</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <th> 公司产品:</th> <td> <asp:CheckBoxList ID="chkProducts" runat="server" CssClass="mustChk" ToolTip="公司产品" RepeatDirection="Horizontal" RepeatLayout="Flow"> <asp:ListItem>电脑</asp:ListItem> <asp:ListItem>手机</asp:ListItem> <asp:ListItem>Pad</asp:ListItem> <asp:ListItem>手表</asp:ListItem> </asp:CheckBoxList> </td> </tr> <tr> <th> 公司:</th> <td> <asp:TextBox ID="txtNumberAndPoint0" runat="server" onkeyup="checkNumberPointByUp(this,2);" onblur="checkNumberPointByBlur(this,2);" CssClass="choose" ToolTip="价格"></asp:TextBox> </td> </tr> <tr> <th> 电话:</th> <td> <asp:TextBox ID="txtPhone" runat="server" validateType="phone"></asp:TextBox> </td> </tr> <tr> <th> 手机:</th> <td> <asp:TextBox ID="txtMobile" runat="server" validateType="mobile"></asp:TextBox> </td> </tr> <tr> <th> 电话/手机:</th> <td> <asp:TextBox ID="TextBox1" runat="server" validateType="phoneormobile"></asp:TextBox> </td> </tr> <tr> <th> 邮箱:</th> <td> <asp:TextBox ID="txtEmail" runat="server" validateType="email"></asp:TextBox> </td> </tr> <tr> <th> 邮编:</th> <td> <asp:TextBox ID="txtZipCode" runat="server" MaxLength="6" validateType="zipcode"></asp:TextBox> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <asp:Button ID="Button1" runat="server" Text="验证" CssClass="submitInput" ValidateIsEnough="false"/> </td> </tr> </table> <br /> </div> </form> </body> </html>
css 样式:
.submitInput { width:80px; } .mustInput { width:200px; background-color:#FFFFE6; } .mustDrp { width:205px; background-color:#FFFFE6; } .mustChk input { background-color:#FFFFE6; } .choose { width:200px; background: url(../images/icon1.gif) no-repeat scroll right center #FFFFFF; border: 1px solid #999999; height: 20px; cursor:pointer; }
通用的js验证代码:
/* 网页上文本框输入的验证 版权所有者:陈家涛 */ $(document).ready(function() { $(".submitInput").bind("click", function() { var flag = true; var ValidateIsEnough = true; if (null != $(this).attr("ValidateIsEnough") && $(this).attr("ValidateIsEnough") == "false") { ValidateIsEnough = false; } /*验证所有文本框 */ $("input[type=text]").each(function() { if ($(this).hasClass("mustInput") && $.trim($(this).val()) == "") { /*所有非空验证 */ alert($(this).attr("title") + "不能为空!"); flag = false; return false; } if (null != $(this).attr("validateType") && $(this).val() != "") { /*是否有类型验证 */ if (!validateType($(this))) { flag = false; return false; } } }); /*验证所有下拉框框 */ if (flag) { $("select").each(function() { if (null == $(this).val() || $(this).val() == "-1") { alert("请选择" + $(this).attr("title") + "!"); flag = false; return false; } }); } /*验证所有复选框 */ if (flag) { var chkFlag = true; $(".mustChk").each(function() { if ($(this).children(0).attr("checked")) { chkFlag = false; return false; } if (chkFlag) { alert("请选择" + $(this).attr("title")); flag = false; return false; } }); } ValidateIsEnough = customValidate(); if (flag && ValidateIsEnough) { return true; } else { return false; } }); }); function validateType(obj) { var flag = false; var type = $(obj).attr("validateType"); var str = $.trim($(obj).val()); switch (type) { case "phone": if (!IsPhone(str)) { alert("电话格式不正确!"); return false; } break; case "email": if (!IsEmail(str)) { alert("Email格式不正确!"); return false; } break; case "mobile": if (!IsMobile(str)) { alert("手机格式不正确!"); return false; } break; case "zipcode": if (!IsPhone(str)) { alert("邮编格式不正确!"); return false; } case "phoneormobile": if (!IsPhone(str) && (!IsMobile(str))) { alert("电话格式不正确!"); return false; } break; default: break; } return true; } //是否是邮箱 function IsEmail(str) { if (str.length != 0) { var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if (reg.test(str)) { return true; } } return false; } //是否是邮编 function IsZIP(str) { if (str.length != 0) { reg = /^\d{6}$/; if (reg.test(str)) { return true; } } return false; } //是否是中文 function IsChinese(str) { if (str.length != 0) { reg = /^[\u0391-\uFFE5]+$/; if (reg.test(str)) { return true; } } return false; } //是否是手机 function IsMobile(str) { if (str.length != 0) { reg = /^1[3-8][0-9]{9}$/; if (reg.test(str)) { return true; } } return false; } //是否是电话 function IsPhone(str) { if (str.length != 0) { reg = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/; if (reg.test(str)) { return true; } } return false; } ///自定义验证 function customValidate() { return true; } /* 验证只能输入数字,并可指定小数点的最大位数 */ function checkNumberPointByUp(obj, size) { var result = $.trim(obj.value); if ("" != result) { var last = result.substring(result.length - 1); if (result == last) { //代表只有1位不可以是0或者是小数点 if (last == ".") { result = ""; } else { if (!(/\d/i.test(result))) { result = ""; } } } else { var flag = true; if (size > 0) { //有小数点位数控制 var index = result.indexOf('.'); if (index > 0) { //代表有小数点 var behindPoint = result.substring(index + 1); if (behindPoint.length > size) { result = result.substring(0, result.length - 1); flag = false; } } } if (flag) { //需要取验证 var reg = /^[0-9.]$/; var r = last.match(reg); if (r == null) result = result.substring(0, result.length - 1); } if (result.length == 2) { if (result.substring(0, 1) == "0" && result.substring(1, 2) != ".") { //首位是0第二位不是小数点需要清空 result = ""; } } } } obj.value = result; } function checkNumberPointByBlur(obj, size) { var result = $.trim(obj.value); var flag = true; if (result.indexOf('.') > -1) { //代表有小数点 if (size > 0) { //代表有小数位数限制 if (result.substring(result.indexOf('.') + 1).length > size) { flag = false; result = ""; } } } if (flag) { for (var i = 0; i < result.length; i++) { if (result.substr(0,1)!= ".") { if (!(/\d/i.test(result.substr(0, 1)))) { result = ""; break; } } } } obj.value = result; }