擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件
更新時(shí)間：2021年10月15日 09:10:44 作者：秋荷雨翔
這篇文章主要幫助大家擁有一個(gè)屬于自己的javascript表單驗(yàn)證插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
自己編寫(xiě)了一個(gè)表單驗(yàn)證插件，使用起來(lái)很簡(jiǎn)單，以后還可以擴(kuò)展更多的功能，比如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可以不寫(xiě)。該插件會(huì)遍歷每個(gè)有valid的span標(biāo)簽，找出它前面需要驗(yàn)證的元素，根據(jù)rule驗(yàn)證，如果驗(yàn)證不通過(guò)，則顯示邊框?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：
/**
* 驗(yàn)證插件
*/
SimpoValidate = {
//驗(yàn)證規(guī)則
rules: {
int: /^[1-9]\d*$/,
number: /^[+-]?\d*\.?\d+$/
},
//初始化
init: function () {
$("span[class*='valid']").each(function () { //遍歷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 () {
var bl = true;
$("span[class*='valid']").each(function () { //遍歷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;
},
//單個(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");
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;
}
}
}
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;
}
}
}
}
return true;
},
//獲取驗(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; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
$("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();
});
如何使用：
1、引用CSS和JS(必須引用jQuery)：
<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script> <script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>
2、表單HTML代碼(部分代碼)：
<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
<tr>
<td>
<input name="c" value="" type="text" />
<span class="valid nullable" rule="int" msg="可為空，請(qǐng)?zhí)顚?xiě)正整數(shù)"></span>
</td>
</tr>
<tr>
<td>
<input name="d" value="" type="text" />
<span class="valid" rule="number" msg="必填，請(qǐng)?zhí)顚?xiě)數(shù)字"></span>
</td>
</tr>
<tr>
<td>
<select>
<option value="-1">==請(qǐng)選擇==</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
<span class="valid" rule="^(?!-1$).+$" msg="必選"></span>
</td>
</tr>
<tr>
<td>
<input name="a" value="1" type="checkbox" />
<span>多</span>
<input name="a" value="2" type="checkbox" />
<span>少</span>
<span class="valid" rule="" msg="必選" to="a"></span>
</td>
</tr>
<tr>
<td>
<input name="b" value="1" type="radio" />
<span>狗</span>
<input name="b" value="2" type="radio" />
<span>貓</span>
<span class="valid" rule="" msg="必選" to="b"></span>
</td>
</tr>
<tr>
<td>
<textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>
<span class="valid nullable" rule="^(.|\n){5,100}$" msg="可為空，長(zhǎng)度必須大于等于5小于等于100"></span>
</td>
</tr>
</table>
3、執(zhí)行驗(yàn)證JS代碼：
//保存數(shù)據(jù)
function save() {
if (SimpoValidate.valid()) { //執(zhí)行驗(yàn)證
$("#frm").submit(); //提交表單
}
}
效果圖：
以上就是作者自己動(dòng)手編寫(xiě)的javascript表單驗(yàn)證插件，希望能夠幫助到大家。
相關(guān)文章
Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是為了改變函數(shù)體內(nèi)部 this 的指向。下面通過(guò)本文重點(diǎn)給大家介紹js中apply，call，bind的巧妙使用方法，感興趣的朋友一起學(xué)習(xí)吧2016-08-08
bootstrap-table.js擴(kuò)展分頁(yè)工具欄(增加跳轉(zhuǎn)到xx頁(yè))功能
這篇文章主要介紹了bootstrap-table.js擴(kuò)展分頁(yè)工具欄，增加跳轉(zhuǎn)到xx頁(yè)功能，由于小編的水平停留在dom級(jí)，此次擴(kuò)展只支持頁(yè)面上的表格，如果大家有好的建議歡迎提出2017-12-12
js print打印網(wǎng)頁(yè)指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js print打印網(wǎng)頁(yè)指定區(qū)域內(nèi)容的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件
Sublime Text幾乎是任何開(kāi)發(fā)者在其工具箱的必備應(yīng)用程序,這篇文章主要介紹了JavaScript開(kāi)發(fā)者必備的10個(gè)Sublime Text插件，感興趣的小伙伴們可以參考一下2016-02-02
Promise是異步編程的一種解決方案，在ES6中Promise被列為了正式規(guī)范，統(tǒng)一了用法，原生提供了Promise對(duì)象。接下來(lái)通過(guò)本文給大家介紹Promise的介紹及基本用法，感興趣的朋友一起看看吧2021-10-10
微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊圖片旋轉(zhuǎn)180度并且彈出下拉列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
在很多網(wǎng)頁(yè)上可以看到，點(diǎn)擊網(wǎng)頁(yè)的某個(gè)地方能夠彈出一個(gè)新窗口，并且可以在屏幕中隨意拖動(dòng)，通過(guò)此篇文章給大家介紹javascript彈出拖動(dòng)窗口，有需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js中傳遞特殊字符(+,&)的方法，有需要的朋友可以參考一下2014-01-01
隨機(jī)生成10個(gè)不重復(fù)的0-100的數(shù)字(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇隨機(jī)生成10個(gè)不重復(fù)的0-100的數(shù)字(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
微信小程序自定義組件實(shí)現(xiàn)環(huán)形進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件實(shí)現(xiàn)環(huán)形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06