轻松搞定js表单验证

时间：2021-05-25

先看看效果图：

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" />//.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": ["电话", /^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>";//验证失败，添加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;}

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章