JS实现支持Ajax验证的表单插件

本文为大家分享了一个表单验证插件，支持ajax验证，使用起来很简单。
每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。
验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。
插件代码：
CSS：

.failvalid{border: solid 2px red ！important;}

JS：

/*** 验证插件*/SimpoValidate = {//验证规则rules: {int: /^[1-9]d*$/,number: /^[+-]?d*.?d+$/},//初始化init: function （） {$（".valid"）.each（function （） { //遍历spanif （$（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）;}）;}}}）;},//验证全部，验证成功返回truevalid: function （） {SimpoValidate.ajaxCheckResult = true;var bl = true;$（".valid"）.each（function （） { //遍历spanif （$（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 {target = validSpan.prev（）;}if （target） {if （！SimpoValidate.validOne（target, validSpan）） {bl = false;}}}}）;return bl && SimpoValidate.ajaxCheckResult;},//单个验证，验证成功返回truevalidOne: 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或radioif （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或selectif （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, 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）;}}}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="^（.|
）{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="^（.|
）{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="^（.|
）{0,500}$"></span></td></tr></table></div></div></div></form>

效果图：

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