自己编写了一个表单验证插件，支持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 + "'],select[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, 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="^(.|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>

效果图：

以上所述就是本文的全部内容了，希望大家能够喜欢。