JS表单验证插件(支持Ajax验证)

自己编写了一个表单验证插件，支持ajax验证，使用起来很简单。

每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。

验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。

插件代码：

CSS：

@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>

View Code
效果图：