資訊專欄INFORMATION COLUMN
摘要：這是一款極簡潔的表單校驗插件，僅行代碼，屬于半封裝模式，可任意編寫業(yè)務(wù)邏輯代碼，核心代碼如下校驗插件判斷是否函數(shù)表單提交校驗全部將單個事件對象追加到數(shù)組中，提交表單時遍歷執(zhí)行核心處理方法單個元素注冊失焦事件遍歷對象提交按鈕注冊事件返回集合，
這是一款極簡潔的表單校驗插件，僅50行代碼，屬于半封裝模式，可任意編寫業(yè)務(wù)邏輯代碼，核心代碼如下：
(function(){
// 校驗插件
if(!$.fn.hasOwnProperty("verify")){
$.fn.verify = function(config) {
var fields = [], item;
if (!config) return;
// 判斷是否函數(shù)
function isFunction(obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
}
// 表單提交校驗(全部)
function handleSubmit() {
var i, errors = false, len = fields.length;
for (i = 0; i < len; i++) {
if (!fields[i].testValid()) errors = true;
}
if (errors) return false;
if (isFunction(config.success)) return config.success();
}
function process(opts, selector) {
var field = $(selector),
error = {message: opts.message || ""},
errorEl = config.errorTemplate(error);
// 將單個input事件對象追加到數(shù)組中，提交表單時遍歷執(zhí)行
fields.push(field);
// 核心處理方法
field.testValid = function testValid() {
var temp, error, el = $(this), val = el.val();
error = !opts.test(val);
if (error) {
el.after(errorEl);
return false;
} else {
temp = errorEl.get(0);
temp.parentNode && temp.parentNode.removeChild(temp);
return true;
}
};
// 單個input元素注冊失焦事件
field.on("blur", field.testValid);
}
// 遍歷對象
for(item in config.fields) {
process(config.fields[item], item)
}
// 提交按鈕注冊事件
if (config.submitButton) {
$(config.submitButton).click(handleSubmit);
} else {
this.on("submit", handleSubmit);
}
// 返回集合，供調(diào)用
return fields;
}
}
})();
插件調(diào)用方法如下：
(function(){
// 注冊校驗
$("#register").verify({
fields:{
//選中名字字段，設(shè)置校驗規(guī)則
"#register input[name="phone"]":{
//錯誤提示信息
message:"手機號碼格式不正確，請重新輸入",
//校驗規(guī)則，返回布爾值，true則成功，false則失敗，可在此回調(diào)函數(shù)中插入您的業(yè)務(wù)邏輯，最終返回bool值就好，極方便
test:function(val){
var reg = /^(1[3-8][0-9])d{8}$/;
return reg.test(val);
}
},
"#register input[name="password"]":{
message:"請輸入正確格式的密碼",
test: function (val) {
if (!val) return false;
var reg = /^[a-zA-Z0-9]{6,20}$/;
return reg.test(val);
}
},
"#register input[name="repassword"]":{
message:"兩次密碼輸入不一致！",
test:function(val){
var password = $("input[name="password"]").val();
if(password != val) {
return false;
} else {
return true;
}
}
}
},
// 錯誤模板，設(shè)置裝載錯誤信息的容器，插入上面設(shè)置的錯誤提示信息
errorTemplate:function(error){
return $("" + error.message + "");
},
//校驗成功后的回調(diào)方法，可插入校驗成功后要執(zhí)行的邏輯代碼
success:function(){
//coding~~
}
//表單提交按鈕，若未設(shè)置，則為默認(rèn)的form.submit;
submitButton: "#register .submit"
});
})
原本是想在插件內(nèi)封裝一些固定的表單校驗方法，但后來發(fā)現(xiàn)各種業(yè)務(wù)需求千奇百怪，簡直眾口難調(diào)，固以此方式呈現(xiàn)，只封裝通用的校驗流程，業(yè)務(wù)邏輯自行穿插，美其名曰：”半封裝“，具體優(yōu)劣各位看官自行研究了，當(dāng)然，更希望您能夠分享自己的見解～～
下附傳送門，詳細(xì)測試demo請自行跳轉(zhuǎn)下載，不謝！
https://github.com/cloverso/verify
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86013.html
摘要：今天就來介紹一下如何利用的自定義指令來開發(fā)一個表單驗證插件的過程。按照這種方式就能夠使用自己開發(fā)的這個表單校驗插件。這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎(chǔ)組件我就直接自己開發(fā)了。今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過...
摘要：一表單驗證模塊的構(gòu)成任何表單驗證模塊都是由配置校驗報錯取值這幾部分構(gòu)成的。其實我是想寫個指令來完成表單驗證的事的。當(dāng)然表單驗證這種是高度定制化的。 前言 前段時間，老大搭好了Vue的開發(fā)環(huán)境，于是我們愉快地從JQ來到了Vue。這中間做的時候，在表單驗證上做的不開心，看到vue的插件章節(jié)，感覺自己也能寫一個，因此就自己開始寫了一個表單驗證插件va.js。 當(dāng)然為什么不找個插件呢？ vu...
摘要：表單驗證用的插件，還用到了下拉列表相關(guān)的插件。沒想到，這其中暗暗地隱藏著一個個坑。于是看了一下插件的官方文檔，它提供了兩種方法，可以在表單元素上添加，刪除校驗規(guī)則。 表單驗證用的jquery validation插件，還用到了下拉列表相關(guān)的插件selectize。有這樣一個功能，表單中一個下拉列表A的required屬性是根據(jù)另一個下拉列表B的選擇內(nèi)容來動態(tài)變換的。于是想著根據(jù)B被選中...
摘要：瀏覽文檔，發(fā)現(xiàn)插件特別適合做表單校驗出錯的提示。因為使的非常頻繁，最近把它封住下，做成的插件。通過本插件，在標(biāo)簽中定義好校驗正則錯誤信息即可。點擊提交時，如果有表單項目不合法，會阻止表單繼續(xù)提交。最后調(diào)整下，就實現(xiàn)了截圖的效果。 最近的項目，用Bootstrap比較多。瀏覽Bootstrap文檔，發(fā)現(xiàn) popover 插件特別適合做表單校驗出錯的提示。 因為使的非常頻繁，最近把它封住下...
閱讀 1877·2021-11-18 13:20
閱讀 1232·2021-10-11 10:59
閱讀 3055·2021-08-24 10:01
閱讀 3589·2019-08-29 14:21
閱讀 3456·2019-08-29 14:15
閱讀 3600·2019-08-26 12:23
閱讀 3416·2019-08-26 11:46
閱讀 3433·2019-08-26 11:35
