自己编写的支持Ajax验证的JS表单验证插件
发布时间:2020-12-14 22:29:12 所属栏目:资源 来源:网络整理
导读:自己编写了一个表单验证插件,支持ajax验证,使用起来很简单。 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息;to表示要验证的元素的name值,如
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单。 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息;to表示要验证的元素的name值,如果元素是单个的,to可以不写。该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息。 验证时机:1、点击提交按钮时显式调用验证方法;2、当元素触发blur时验证。 插件代码: CSS: .failvalid { border: solid 2px red !important; } JS: /** * suxiang * 2014年12月22日 * 验证插件 */ SimpoValidate = { //验证规则 rules: { int: /^[1-9]d*$/,number: /^[+-]?d*.?d+$/ },//初始化 init: function () { $(".valid").each(function () { //遍历span if ($(this)[0].tagName.toLowerCase() == "span") { var validSpan = $(this); var to = validSpan.attr("to"); var target; if (to) { target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']"); } else { var target = validSpan.prev(); } if (target) { target.blur(function () { SimpoValidate.validOne(target,validSpan); }); } } }); },//验证全部,验证成功返回true valid: function () { SimpoValidate.ajaxCheckResult = true; var bl = true; $(".valid").each(function () { //遍历span if ($(this)[0].tagName.toLowerCase() == "span") { var validSpan = $(this); var to = validSpan.attr("to"); var target; if (to) { target = $("input[name='" + to + "'],textarea[name='" + to + "']"); } else { target = validSpan.prev(); } if (target) { if (!SimpoValidate.validOne(target,validSpan)) { bl = false; } } } }); return bl && SimpoValidate.ajaxCheckResult; },//单个验证,验证成功返回true validOne: function (target,validSpan) { SimpoValidate.removehilight(target,msg); var rule = SimpoValidate.getRule(validSpan); var msg = validSpan.attr("msg"); var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空 var to = validSpan.attr("to"); var ajaxAction = validSpan.attr("ajaxAction"); if (target) { //checkbox或radio if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) { var checkedInput = $("input[name='" + to + "']:checked"); if (!nullable) { if (checkedInput.length == 0) { SimpoValidate.hilight(target,msg); return false; } } } //input或select if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") { var val = target.val(); if (!nullable) { if ($.trim(val) == "") { SimpoValidate.hilight(target,msg); return false; } } else { if ($.trim(val) == "") { SimpoValidate.removehilight(target,msg); return true; } } if (rule) { var reg = new RegExp(rule); if (!reg.test(val)) { SimpoValidate.hilight(target,msg); return false; } } if (ajaxAction) { SimpoValidate.ajaxCheck(target,val,ajaxAction); } } else if (target[0].tagName.toLowerCase() == "textarea") { var val = target.text(); if (!nullable) { if ($.trim(val) == "") { SimpoValidate.hilight(target,ajaxAction); } } } return true; },ajaxCheckResult: true,ajaxCheck: function (target,value,ajaxAction) { var targetName = target.attr("name"); var data = new Object(); data[targetName] = value; $.ajax({ url: ajaxAction,type: "POST",data: data,async: false,success: function (data) { if (data.data == true) { SimpoValidate.removehilight(target); } else { SimpoValidate.ajaxCheckResult = false; SimpoValidate.hilight(target,data.data); } } }); },//获取验证规则 getRule: function (validSpan) { var rule = validSpan.attr("rule"); switch ($.trim(rule)) { case "int": return this.rules.int; case "number": return this.rules.number; default: return rule; break; } },//红边框及错误提示 hilight: function (target,msg) { target.addClass("failvalid"); target.bind("mouSEOver",function (e) { SimpoValidate.tips(target,msg,e); }); target.bind("mouSEOut",function () { SimpoValidate.removetips(); }); },//取消红边框及错误提示 removehilight: function (target) { target.unbind("mouSEOver"); target.unbind("mouSEOut"); target.removeClass("failvalid"); SimpoValidate.removetips(); },//显示提示 tips: function (target,text,e) { var divtipsstyle = "position: absolute; z-index:99999; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; font-size:12px;"; $("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>"); var divtips = $(".div-tips"); divtips.css("visibility","visible"); var top = e.clientY + $(window).scrollTop() - divtips.height() - 18; var left = e.clientX; divtips.css("top",top); divtips.css("left",left); $(target).mousemove(function (e) { var top = e.clientY + $(window).scrollTop() - divtips.height() - 18; var left = e.clientX; divtips.css("top",top); divtips.css("left",left); }); },//移除提示 removetips: function () { $(".div-tips").remove(); } }; $(function () { SimpoValidate.init(); }); 如何使用: Edit页面: @using Model.Suya; @{ ViewBag.Title = "Add"; Layout = "~/Views/Shared/_Layout.cshtml"; } @{ List<sys_post> postList = (List<sys_post>)ViewData["postList"]; sys_post post = (sys_post)ViewData["post"]; } <script type="text/javascript"> $(function () { //部门树 $('#dept').combotree({ url: 'GetDeptTree',required: false,checkbox: true,onLoadSuccess: function () { $('#dept').combotree('setValue',"@(post.depCode)"); } }); //操作结果 $("#ifrm").load(function (data) { var data = eval("(" + $("#ifrm").contents().find("body").html() + ")"); alert(data.msg); if (data.ok) back(); }); $("select[name='postLevel']").find("option[value='@(post.postLevel)']").attr("selected","selected"); }); //保存 function save() { if (valid()) { $("#frm").submit(); } } //验证 function valid() { var dept = $("input[name='dept']"); if (!dept.val()) { SimpoValidate.hilight(dept.parent(),"请选择所属部门"); } else { SimpoValidate.removehilight(dept.parent()); } return SimpoValidate.valid(); } //返回 function back() { parent.$('#ttTab').tabs('select',"岗位管理"); var tab = parent.$('#ttTab').tabs('getSelected'); tab.find("iframe").contents().find("#btnSearch").click(); parent.$("#ttTab").tabs('close','修改岗位信息'); } </script> <div class="tiao"> <input type="button" class="submit_btn" value="保存" onclick="save()" /> <input type="button" class="submit_btn" value="返回" onclick="back()" /> </div> <iframe id="ifrm" name="ifrm" style="display: none;"></iframe> <form id="frm" method="post" enctype="multipart/form-data" action="/HR/PostManage/SaveEdit?id=@(post.id)" target="ifrm"> <div class="adminMainContent"> <div class="box"> <div class="box-title"> 基础信息 </div> <div class="box-content"> <table cellpadding="0" cellspacing="0" class="detail" width="100%"> <tr> <td class="title"> <span class="mst">*</span>岗位名称: </td> <td style="width: 35%;"> <input type="text" class="xinxi_txt" name="postName" value="@post.postName" /> <span class="valid" msg="必填,且长度不能超过50" rule="^(.|n){0,50}$"></span> </td> <td class="title"> <span class="mst">*</span>岗位编号: </td> <td style="width: 35%;"> <input type="text" class="xinxi_txt" name="postCode" value="@post.postCode" /> <span class="valid" msg="必填,且长度不能超过20" rule="^(.|n){0,20}$" ajaxaction="/HR/PostManage/AjaxCheckPostCode?id=@post.id"> </span> </td> </tr> <tr> <td class="title"> <span class="mst">*</span> 所属部门: </td> <td style="width: 35%;"> <input type="text" name="depCode" id="dept" class="easyui-combotree" style="height: 30px;" /> </td> <td class="title"> <span class="mst">*</span>汇报对象: </td> <td style="width: 35%;"> <select class="xueli" name="reportPostCode" id="agreementType"> <option value="" selected="selected">==请选择==</option> @foreach (sys_post item in postList) { if (item.postCode == post.reportPostCode) { <option value="@item.postCode" selected="selected">@item.postName</option> } else { <option value="@item.postCode">@item.postName</option> } } </select> <span class="valid" msg="请选择合同分类"> </td> </tr> <tr> <td class="title"> <span class="mst">*</span>岗位级别: </td> <td style="width: 35%;"> <select class="xueli" name="postLevel"> <option value="" selected="selected">==请选择==</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <span class="valid" msg="请选择岗位级别"> </td> <td class="title"> </td> <td style="width: 35%;"> </td> </tr> <tr> <td class="title"> <span class="mst">*</span>备注: </td> <td colspan="3" style="width: 35%;"> <textarea name="remarks" style="width: 500px;">@post.remarks</textarea> <span class="valid" msg="长度不得超过500" rule="^(.|n){0,500}$"></span> </td> </tr> </table> </div> </div> </div> </form> 效果图: 以上所述就是本文的全部内容了,希望大家能够喜欢。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- html – 关于在网页上嵌入midi文件
- jQuery实现仿腾讯视频列表分页效果的方法
- 如何以colgroup为中心的XHTML(和/或HTML4)TABLE列?
- jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
- domain-name-system – Spamassassin:绕过/etc/resolv.con
- Could not reliably determine the server's fully qua
- Shadow DOM的样式
- Flutter中Text Widgets下的黄线?
- 为什么域模型不应该用作REST API中的资源?
- 破解HTML文字(/)的最佳方式是什么?