轻松搞定js表单验证

先看看效果图：

html:
引入
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/Validate-1.0.1.js"></script>

<！DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="/Scripts/jquery-1.10.2.js"></script><script src="/Scripts/Validate-1.0.1.js"></script><link href="/Content/system.css" rel="stylesheet" type="text/css" /><link href="/Content/metro.css" rel="stylesheet" type="text/css" /></head><body><form id="form1" runat="server"><div class="form_content"><div class="form_center_part"><div class="form_view_main"><div class="form_part"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_part_t"><tbody><tr><th>长度区间：</th><td class="graytxt1"><asp:TextBox ID="txtNewPwd" runat="server" class="required length_2_5" /></td></tr><tr><th>必填</th><td class="graytxt1"><asp:TextBox ID="txtPwd" runat="server" class="required"/></td></tr><tr><th>正整数</th><td class="graytxt1"><asp:TextBox ID="TextBox1" runat="server" class="integer" /></td></tr><tr><th>小数</th><td class="graytxt1"><asp:TextBox ID="TextBox3" runat="server" class="decimal" /></td></tr><tr><th>手机</th><td class="graytxt1"><asp:TextBox ID="txtMobile" runat="server" class="required mobile"></asp:TextBox></td></tr><tr><th>电话</th><td class="graytxt1"><asp:TextBox ID="TextBox2" runat="server" class="tel"></asp:TextBox></td></tr><tr><th>单选</th><td class="graytxt1"><asp:RadioButtonList ID="rbtnlCode" runat="server" class="rbtn required" RepeatLayout="Flow" RepeatDirection="Horizontal"><asp:ListItem Value="1">无</asp:ListItem><asp:ListItem Value="2">A</asp:ListItem><asp:ListItem Value="3">B</asp:ListItem></asp:RadioButtonList></td></tr><tr><th>多选</th><td class="graytxt1"><asp:CheckBoxList ID="chklCode" runat="server" class="chk required length_2_4" RepeatLayout="Flow" RepeatDirection="Horizontal"><asp:ListItem Value="1">A</asp:ListItem><asp:ListItem Value="2">B</asp:ListItem><asp:ListItem Value="3">C</asp:ListItem><asp:ListItem Value="4">D</asp:ListItem><asp:ListItem Value="5">E</asp:ListItem></asp:CheckBoxList><br />最少选择2项但不超过4项</td></tr><tr><th>多选111</th><td class="graytxt1"><asp:CheckBoxList ID="CheckBoxList1" runat="server" class="chk length_2_0" RepeatLayout="Flow" RepeatDirection="Horizontal"><asp:ListItem Value="1">A</asp:ListItem><asp:ListItem Value="2">B</asp:ListItem><asp:ListItem Value="3">C</asp:ListItem><asp:ListItem Value="4">D</asp:ListItem><asp:ListItem Value="5">E</asp:ListItem></asp:CheckBoxList><br />至少选择2项</td></tr><tr><th>下拉</th><td class="graytxt1"><asp:DropDownList ID="drpCode" runat="server" class="drp required"><asp:ListItem Value="">请选择</asp:ListItem><asp:ListItem Value="2">A</asp:ListItem><asp:ListItem Value="3">B</asp:ListItem></asp:DropDownList></td></tr></tbody></table></div><div class="btn_center"><asp:Button ID="btnSubmit" runat="server" CssClass="btn_box submit" Text="提交" OnClick="btnSubmit_Click" /><asp:Button ID="btnSave" runat="server" CssClass="btn_box save" Text="保存" OnClick="btnSave_Click" /></div></div></div></div></form></body></html>

脚本：Validate-1.0.1.js

/// <reference path="jquery-1.10.2-vsdoc.js" />/*@Name:验证@Author:朱翰洲 @WeChat/QQ：86128281@Version: 1.0.1 Beta@Update:2016/10/10@Desc: 将会持续更新使用说明：1）demo源码为ASP.NET2）需要验证的控件加onblur="Check（this）"或onclick="Check（this）"。3）Check（），可自定义提示消息，无自定义时读取默认提示，详见该函数内的注释。4）页面无其他逻辑验证时，可加入Validate-?.?.?.default.js脚本文件，无需在控件中加入Check（this）。5）radio、checkbox和select详见selectClass或Validate（）内的注释。6）文本、多选有length_?_?区间验证（至少？项）时须与控件ID命名匹配（id^=xx），否则保存时将会跳过该验证，详见SaveValidate（）。7）若仅需控制MaxLength建议使用MaxLength属性。8）常用格式验证（.mobile,.tel,.email）需对应，需要其他验证可扩展。9）若有验证格式如手机、电话等格式，将不再验证长度10）css文件中的名称不得与该验证中使用的class名称冲突。11）所有class可根据使用习惯更改。class：1）required:非空2）onerror:标记错误3）length_?_?:详见checkLength（）内的注释4）rbtn:radio5）chk:checkbox6）drp:select7）mobile:手机8）tel:电话9）email:邮箱 *///.rbtn as RadioButtonList//.chk as CheckBoxList//.drp as DropDownListvar selectClass = ".rbtn,.chk,.drp";//获取验证类型classfunction getDictTypeClass（） {var keys = ".";$.each（dictType, function （key, val） {keys += key + ",.";}）;return keys.substring（0, keys.length - 2）;}var dictType = {"mobile": ["手机", /^0?（13[0-9]|15[0-9]|18[0-9]|14[57]）[0-9]{8}$/],"tel": ["电话", /^0d{2,3}-?d{7,8}$/],"email": ["邮箱", /^[0-9a-z][0-9a-z-\_.]+@（[0-9a-z][0-9a-z-]*.）+[a-z]{2,}$/i],"integer": ["整数", /^[1-9]+[0-9]*]*$/],"decimal": ["数字", /^[0-9]+.?[0-9]*$/],}$（function （） {$（".required"）.each（function （） {$（this）.parent（）.append（"<em>*</em>"）;//在必填项后添加 * 标记必填，可根据需要修改显示位置}）;try {//判断是否有Check（）if （jQuery.isFunction（Check）） {$（selectClass）.click（function （） {Check（this）;}）;$（getDictTypeClass（） + ",.required"）.blur（function （） {Check（this）;}）;$（"#btnSubmit"）.click（function （） {return SubmitValidate（）;}）$（"#btnSave"）.click（function （） {return SaveValidate（）;}）}}catch （err） {}}）;function Check（par, message） {var id = getId（par.id）;if （typeof （message） == "undefined"） {//未设置message 读取默认提示信息message = （$（id）.is（selectClass） ? "请选择" : "请输入"） + $（id）.parent（）.prev（）.text（）.trim（）.replace（"：", ""）.replace（":", ""）;}Validate（id, message）;}//验证function Validate（id, message） {var isRequired = getIsRequired（id）;if （$（id）.is（selectClass）） {$（id）.css（"background", "none"）;//单选if （$（id）.hasClass（"rbtn"）） {if （isRequired） {if （typeof （$（"input:radio[name="" + replaceId（id） + ""]:checked"）.val（）） == "undefined"） {AddError（id, message）;} else {RemoveError（id）;}}}//多选else if （$（id）.hasClass（"chk"）） {var options = $（"input[name^="" + replaceId（id） + ""]:checked"）.length;//选项（数量）var isLength = getIsCheckLength（id）;//有选项限制if （isLength || isRequired） {//必选if （isRequired） {if （options > 0） {//有选择项限制if （isLength == true） {checkLength（id, options, ""）;//return;}else {RemoveError（id）;}} else {AddError（id, message）;//未选中}}//非必选，但选择后有选择项限制else if （isLength && options > 0） {checkLength（id, options, ""）;}else {RemoveError（id）;}}}//下拉else if （$（id）.hasClass（"drp"）） {if （isRequired） {if （$（id）.val（） == ""） {AddError（id, message）;} else {RemoveError（id）;}}}}//TextBoxelse {if （$（id）.val（）.trim（） ！== ""） {if （getIsCheckLength（id）） {checkLength（id, $（id）.val（）.trim（）.length, "text"）;}else {checkFormat（id）; //格式验证不再验证长度}} else {if （isRequired） {AddError（id, message）;} else {RemoveError（id）;}}}}//是否必填function getIsRequired（id） {return $（id）.hasClass（"required"）;}//是否验证长度function getIsCheckLength（id） {if （typeof （$（id）.attr（"class"）） ！= "undefined"） {return $（id）.attr（"class"）.indexOf（"length"） ！= "-1";} else {return "false";}}//验证长度 itemLength长度或选项数量。text文本其他值为多选function checkLength（id, itemLength, text） {//$（id）.filter（":contains（"length"）"）if （getIsCheckLength（id）） {var length = getClassName（id, "length"）;var min = length.split（"_"）[1], max = length.split（"_"）[2];//取出最小值和最大值//min为0时，取max的最大长度if （min == 0） {var tips = text == "text" ? "最大长度不超过" + max + "位字符" : "需选择" + max + "项";if （itemLength > max） {AddError（id, tips）;}else {RemoveError（id）;}}//max为0时，取min的最小长度else if （max == 0） {if （itemLength < min） {AddError（id, text == "text" ? "请输入" + （min - 1） + "位以上字符" : "至少选择" + min + "项"）;}else {RemoveError（id）;}}//min和max大于0时，取区间else if （min > 0 && max > 0） {var tips = text == "text" ? "请输入" + min + "~" + max + "位的字符" : "需选择" + +min + "~" + max + "项";if （itemLength < min） {AddError（id, tips）;}else if （itemLength > max） {AddError（id, tips）;}else {RemoveError（id）;}}else {RemoveError（id）;}}}String.prototype.trim = function （） {return this.replace（/（^s*）|（s*$）/g, ""）;};var error_icon = "<img src=/Images/error_small.png>";//验证失败，添加onerrorfunction AddError（id, message） {var spId = id.replace（"#", "sp"）;$（id）.addClass（"onerror"）;if （$（id）.nextAll（"span"） == undefined || $（id）.nextAll（"span"）.attr（"id"） ！== spId） {if （$（id）.next（）.html（） === "*"） {// 提示信息放在必填验证符号后$（id）.next（）.after（"<span id="" + spId + "" style="color:red">" + error_icon + message + "</span>"）;} else {$（id）.after（"<span id="" + spId + "" style="color:red">" + error_icon + message + "</span>"）;}} else {$（"#" + spId）.html（error_icon + message）;}}//验证成功，移除onerrorfunction RemoveError（id） {$（id）.removeClass（"onerror"）;$（id.replace（"#", "#sp"））.html（""）;}//删除ID中的#（参数id：#txtId）function replaceId（id） {return id.replace（"#", ""）;}//在ID前加上#（参数id：txtId）function getId（id） {return "#" + id;}//判断className是否存在,返回classNamefunction getClassName（id, className） {var clazzs = $（id）.attr（"class"）;// 获取class 字符串var classIndex = clazzs.substring（clazzs.indexOf（className））;//截取if （classIndex ！= "-1"） {var last = classIndex.indexOf（" "）;//判断后面是否有空格或其他样式return （last == -1 ? classIndex : classIndex.substring（0, last））;}return "";}//验证格式（验证内容详见dictType）function checkFormat（id） {if （$（id）.is（getDictTypeClass（）） && $（id）.val（）.trim（） ！= ""） {var clazz = getDictTypeClass（）.replace（".", ""）.split（","）;for （var i = 0; i < clazz.length; i++） {if （$（id）.attr（"class"）.indexOf（clazz[i].replace（".", ""）） ！= "-1"） {var name = clazz[i].replace（".", ""）;if （dictType[name][1].exec（$（id）.val（）.trim（））） {RemoveError（id）}else {AddError（id, dictType[name][0] + "格式错误"）;}break;}}}else {RemoveError（id）;}}//提交时验证function SubmitValidate（） {$（".required:input"）.trigger（"blur"）;$（selectClass）.trigger（"click"）;return $（".onerror"）.length == 0;}//保存时验证function SaveValidate（） {$（".onerror"）.each（function （） {RemoveError（getId（$（this）.attr（"id"）））;//移除所有验证的提示}）;//查找所有需要验证格式的文本，若非空，验证格式是否正确$（getDictTypeClass（））.each（function （） {if （$（this）.val（）.trim（） ！= ""） {checkFormat（getId（$（this）.attr（"id"）））;}}）;//验证区间$（"form [id^=txt],[id^=chk]"）.each（function （） {var id = $（this）.attr（"id"）;//文本框if （id.indexOf（"txt"） ！= "-1"） {if （$（this）.val（）.trim（） ！= "" && getIsCheckLength（getId（id））） {checkLength（getId（id）, $（this）.val（）.trim（）.length, "text"）;}}//多选else {var options = $（"input[name^="" + id + ""]:checked"）.length;if （options > 0 && getIsCheckLength（getId（id））） {checkLength（getId（id）, options, ""）;}}}）;return $（".onerror"）.length == 0;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。