轻松搞定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.NET 2)需要验证的控件加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:radio 5)chk:checkbox 6)drp:select 7)mobile:手机 8)tel:电话 9)email:邮箱 */ //.rbtn as RadioButtonList //.chk as CheckBoxList //.drp as DropDownList var selectClass = ".rbtn,.chk,.drp"; //获取验证类型class function 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": ["电话", /^0\d{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); } } } } //TextBox else { 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>"; //验证失败,添加onerror function 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); } } //验证成功,移除onerror function 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是否存在,返回className function 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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)