轻松搞定js表单验证

日期：2020-06-09 栏目：程序人生浏览：次

先看看效果图：

轻松搞定js表单验证

html:

引入

<!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="https://www.jb51.net/Scripts/jquery-1.10.2.js"></script> <script src="https://www.jb51.net/Scripts/Validate-1.0.1.js"></script> <link href="https://www.jb51.net/Content/system.css" type="text/css" /> <link href="https://www.jb51.net/Content/metro.css" type="text/css" /> </head> <body> <form runat="server"> <div> <div> <div> <div> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <th>长度区间：</th> <td> <asp:TextBox runat="server" /> </td> </tr> <tr> <th>必填</th> <td> <asp:TextBox runat="server"/> </td> </tr> <tr> <th>正整数</th> <td> <asp:TextBox runat="server" /> </td> </tr> <tr> <th>小数</th> <td> <asp:TextBox runat="server" /> </td> </tr> <tr> <th>手机</th> <td> <asp:TextBox runat="server"></asp:TextBox> </td> </tr> <tr> <th>电话</th> <td> <asp:TextBox runat="server"></asp:TextBox> </td> </tr> <tr> <th>单选</th> <td> <asp:RadioButtonList runat="server" 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> <asp:CheckBoxList runat="server" 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> <asp:CheckBoxList runat="server" 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> <asp:DropDownList runat="server"> <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> <asp:Button runat="server" CssClass="btn_box submit" Text="提交" /> <asp:Button runat="server" CssClass="btn_box save" Text="保存" /> </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=https://www.jb51.net/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>" + error_icon + message + "</span>"); } else { $(id).after("<span>" + 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; }

转载注明出处：https://www.heiqu.com/wzdswz.html

轻松搞定js表单验证

相关推荐