自己編寫的支持Ajax驗(yàn)證的JS表單驗(yàn)證插件

2024-09-01 08:33:01

字體：大中小

供稿：網(wǎng)友

創(chuàng)建一個(gè)JavaScript表單驗(yàn)證插件，可以說是一個(gè)繁瑣的過程，涉及到初期設(shè)計(jì)、開發(fā)與測試等等環(huán)節(jié)。實(shí)際上一個(gè)優(yōu)秀的程序員不僅是技術(shù)高手，也應(yīng)該是善假于外物的。本文介紹的這個(gè)不錯(cuò)的JavaScript表單驗(yàn)證插件，支持ajax驗(yàn)證，有需要的小伙伴可以參考下

自己編寫了一個(gè)表單驗(yàn)證插件，支持ajax驗(yàn)證，使用起來很簡單。

每個(gè)需要驗(yàn)證的表單元素下面有一個(gè)span標(biāo)簽，這個(gè)標(biāo)簽的class有一個(gè)valid表示需要驗(yàn)證，如果有nullable則表示可為空;rule表示驗(yàn)證規(guī)則，msg表示錯(cuò)誤提示信息;to表示要驗(yàn)證的元素的name值，如果元素是單個(gè)的，to可以不寫。該插件會(huì)遍歷每個(gè)有valid的span標(biāo)簽，找出它前面需要驗(yàn)證的元素，根據(jù)rule驗(yàn)證，如果驗(yàn)證不通過，則顯示邊框?yàn)榧t色，鼠標(biāo)放在元素上時(shí)顯示錯(cuò)誤信息。

驗(yàn)證時(shí)機(jī)：1、點(diǎn)擊提交按鈕時(shí)顯式調(diào)用驗(yàn)證方法;2、當(dāng)元素觸發(fā)blur時(shí)驗(yàn)證。

插件代碼：

CSS：

.failvalid

{

border: solid 2px red !important;

}

JS：

/**

* suxiang

* 2014年12月22日

* 驗(yàn)證插件

*/

SimpoValidate = {

//驗(yàn)證規(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);

});

}

}

});

},

//驗(yàn)證全部，驗(yàn)證成功返回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;

},

//單個(gè)驗(yàn)證，驗(yàn)證成功返回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);

}

}

});

},

//獲取驗(yàn)證規(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;

}

},

//紅邊框及錯(cuò)誤提示

hilight: function (target, msg) {

target.addClass("failvalid");

target.bind("mouseover", function (e) {

SimpoValidate.tips(target, msg, e);

});

target.bind("mouseout", function () {

SimpoValidate.removetips();

});

},

//取消紅邊框及錯(cuò)誤提示

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();

}

}

//驗(yàn)證

function valid() {

var dept = $("input[name='dept']");

if (!dept.val()) {

SimpoValidate.hilight(dept.parent(), "請(qǐng)選擇所屬部門");

} 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">

基礎(chǔ)信息

</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>崗位編號(hào)：

</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>匯報(bào)對(duì)象：

</td>

<td style="width: 35%;">

<select class="xueli" name="reportPostCode" id="agreementType">

<option value="" selected="selected">==請(qǐng)選擇==</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="請(qǐng)選擇合同分類">

</td>

</tr>

<tr>

<td class="title">

<span class="mst">*</span>崗位級(jí)別：

</td>

<td style="width: 35%;">

<select class="xueli" name="postLevel">

<option value="" selected="selected">==請(qǐng)選擇==</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="請(qǐng)選擇崗位級(jí)別">

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