本文為大家分享了一個表單驗證插件，支持ajax驗證，使用起來很簡單。
每個需要驗證的表單元素下面有一個span標(biāo)簽，這個標(biāo)簽的class有一個valid表示需要驗證，如果有nullable則表示可為空；rule表示驗證規(guī)則，msg表示錯誤提示信息；to表示要驗證的元素的name值，如果元素是單個的，to可以不寫。該插件會遍歷每個有valid的span標(biāo)簽，找出它前面需要驗證的元素，根據(jù)rule驗證，如果驗證不通過，則顯示邊框為紅色，鼠標(biāo)放在元素上時顯示錯誤信息。
驗證時機(jī)：1、點(diǎn)擊提交按鈕時顯式調(diào)用驗證方法；2、當(dāng)元素觸發(fā)blur時驗證。
插件代碼：
CSS：
.failvalid
{
border: solid 2px red !important;
}
JS：
/**
* 驗證插件
*/
SimpoValidate = {
//驗證規(guī)則
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);
}
}
});
},
//獲取驗證規(guī)則
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)");
}
});
//操作結(jié)果
$("#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>
<input type="button" value="保存" onclick="save()" />
<input type="button" value="返回" onclick="back()" />
</div>
<iframe id="ifrm" name="ifrm"></iframe>
<form id="frm" method="post" enctype="multipart/form-data" action="/HR/PostManage/SaveEdit?id=@(post.id)"
target="ifrm">
<div>
<div>
<div>
基礎(chǔ)信息
</div>
<div>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<span>*</span>崗位名稱：
</td>
<td>
<input type="text" name="postName" value="@post.postName" />
<span msg="必填，且長度不能超過50" rule="^(.|\n){0,50}$"></span>
</td>
<td>
<span>*</span>崗位編號：
</td>
<td>
<input type="text" name="postCode" value="@post.postCode" />
<span msg="必填，且長度不能超過20" rule="^(.|\n){0,20}$" ajaxaction="/HR/PostManage/AjaxCheckPostCode?id=@post.id">
</span>
</td>
</tr>
<tr>
<td>
<span>*</span> 所屬部門：
</td>
<td>
<input type="text" name="depCode" id="dept" />
</td>
<td>
<span>*</span>匯報對象：
</td>
<td>
<select 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 msg="請選擇合同分類">
</td>
</tr>
<tr>
<td>
<span>*</span>崗位級別：
</td>
<td>
<select 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 msg="請選擇崗位級別">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<span>*</span>備注：
</td>
<td colspan="3">
<textarea name="remarks">@post.remarks</textarea>
<span msg="長度不得超過500" rule="^(.|\n){0,500}$"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。