JQuery輸入驗證外掛（使用layer的tips做提示）
阿新 • • 發佈：2019-02-16
重大更新
1.優化部分演算法
2.支援行內元素校驗定義
3.js新增元素，可新增定義事件
內附詳細教程
日期：2018-9-18
-------------------------------------------------------------分界線----------------------------------------------------------------------------------------------------------
如題，使用layer錯誤提示，那麼layer使用的jquery的的要求是1.10以上版本，
所以使用的jQuery的的為1.10.0
支援：文字框，單選框，多選框，下拉框驗證，文字域
如果需要詳細用法，請檢視文章後部分
效果圖：
驗證功能，
游標離開驗證，資料儲存驗證
使用示例頁面
<html> <head> <title>測試外掛文字</title> </head> <body> <br> <br> 名稱：<input type="text" id="name" ><br/> 密碼：<input type="password" id="password" ><br/> 職業：<select id="textselect"> <option ></option> <option value="1">士</option> <option value="2">農</option> <option value="3">工</option> <option value="4">商</option> </select><br/> 性別： <input name="sex" type="radio" value="1">男 <input name="sex" type="radio" value="2">女<br/> 證件型別：<input name="cardType" type="checkbox" value="1">軍官證 <input name="cardType" type="checkbox" value="2">身份證 <input name="cardType" type="checkbox" value="3">戶口本 <input name="cardType" type="checkbox" value="4">護照<br/> <input type="button" id="saves" value="儲存"> <script type="text/javaScript" src="../../js/jquery-1.10.1.min.js" media="all"></script> <link href="../checkInput/css/layui.css"/> <script src="../checkInput/layui.all.js" ></script> <script type="text/javaScript" src="jQuery.checkinput.js"></script> <!-- <link rel="stylesheet" type="text/css" href="/Member/resources/css/checkstyle.css"> --> <script type="text/javaScript"> $(function(){ $(this)._initCheck([ { selector:"#name", checkType:["isInteger"], message:"(必填)名稱只能為數字", //以下可選 maxLength:10, minLength:5, isEmpty:false, checkBefore:function(obj,opt,flg){ console.log("這是呼叫之前執行的方法"); console.log(obj,opt,flg); }, checkAfter:function(obj,opt,flg){ console.log("這是呼叫之後執行的方法"); console.log(obj,opt,flg); }, cheCallback:function(obj,opt,flg){ console.log("驗證時：這是在驗證時呼叫的回撥函式方法"); console.log(obj,opt,flg); return flg; } },{ selector:"#password", isEmpty:false, checkType:["isAnyChar"], message:"除特殊符號外的任意字元", },{ selector:"#textselect", isEmpty:false, checkType:["isInteger"], message:"請選擇一項作為您的職業", },{ selector:'[name="sex"]', isEmpty:false, checkType:["isInteger"], message:"請選擇性別", },{ selector:'[name="cardType"]', isEmpty:false, checkType:["isInteger"], message:"證件型別不能為空", } ],function(obj,type,flg){ }); },[{path:"../layer.min.js",type:'js'}]); $("#saves").click(function () { alert($(this)._saveChe()); }); </script> </body> </html>
使用的CSS（jquery.checkstyle.css）
.form-error {opacity: 0.87;position: absolute;display: block;text-align: left;cursor: pointer;z-index: 9999;} /*left*/ .form-error .form-error-content {user-select: none;position: relative;width: 100%;min-width: 80px; padding: 4px 10px; border: 2px solid #FFC107; border-radius: 6px; background-color: #ff9800; box-shadow: 0 0 6px #FF5722; color: #fff; font: 12px/18px "\5b8b\4f53",Tahoma;} .form-error .form-error-arrow {user-select: none; position: relative; margin: -2px 0 0 13px; width: 15px; } .form-error .form-error-arrow div {display: block; height: 1px;margin: 0 auto;border-right: 2px solid #FFC107;border-left: 2px solid #FFC107;background-color: #ff9800;box-shadow: 0 2px 3px #FF5722;font-size: 0;font-size: 0;line-height: 0;} .form-error .form-error-arrow .line10{width:15px;border:0;} .form-error .form-error-arrow .line9{width:13px;border:0;} .form-error .form-error-arrow .line8{width:11px;} .form-error .form-error-arrow .line7{width:9px;} .form-error .form-error-arrow .line6{width:7px;} .form-error .form-error-arrow .line5{width:5px;} .form-error .form-error-arrow .line4{width:3px;} .form-error .form-error-arrow .line3{width:1px;border-right:2px solid #FFC107;border-bottom:0 solid #FFC107;border-left:2px solid #FFC107;} .form-error .form-error-arrow .line2{width:3px;border:0;background-color:#ddd;} .form-error .form-error-arrow .line1{width:1px;border:0;background-color:#ddd;} /*right*/ .form-error .form-error-arrow-right{user-select: none;border: 1px solid #ffa622;width: 27px; height: 27px;border-radius: 50%;float: left;text-align: center;color: red;font-size: 16pt;} .form-error .form-error-content-right {user-select: none;position: relative;width: 100%;min-width: 80px; padding: 4px 10px; border: 2px solid #FFC107;border-radius: 6px; background-color: #ff9800; box-shadow: 0 0 6px #FF5722; color: #fff; font: 12px/18px "\5b8b\4f53",Tahoma; margin-left: 30px;} .layui-layer-tips { background: 0 0; box-shadow: none; border: none } .layui-layer-tips .layui-layer-content { position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float: left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #FF9800; color: #fff } .layui-layer-tips .layui-layer-close { right: -2px; top: -1px } .layui-layer-tips i.layui-layer-TipsG { position: absolute; width: 0; height: 0; border-width: 8px; border-color: transparent; border-style: dashed; *overflow: hidden } .layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT { left: 5px; border-right-style: solid; border-right-color: #ff9800 } .layui-layer-tips i.layui-layer-TipsT { bottom: -8px } .layui-layer-tips i.layui-layer-TipsB { top: -8px } .layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR { top: 5px; border-bottom-style: solid; border-bottom-color: #ff9800 } .layui-layer-tips i.layui-layer-TipsR { left: -8px } .layui-layer-tips i.layui-layer-TipsL { right: -8px }
使用JS（layer.all.js）
校驗外掛程式碼（jquery.checkinput.js）
/**
* 依賴項: 需引入jQuery檔案,jquery版本在1.10以上(layui.js要求jquery版本在1.10.0以上) (需要手動引用，且必須在當前js外掛之前)
* 和引入checkstyle.css檔案 (預設已經引入，需要注意引入路徑問題)
* 和引入layui.js檔案 (預設已經引入，需要注意引入路徑問題)
* 作 者: jpw
* 日 期: 2018-8-27 18:17:15
* 描 述: 校驗使用者輸入資訊
*/
;
//閉包限定名稱空間
(function($){
//擴充套件jquery 方法
$.fn.extend({
/**
* 根據定義的校驗資訊進行校驗資訊
* @param optionArrays: 需要驗證的引數配置，詳情參考下文defaults物件， 形如
[{
selector:"#name",
isEmpty:false,
checkType:["notNull","isChinese"],
message:"(必填)請輸入使用者名稱稱，名稱只能為漢字"
checkBefore:function(obj,opt,flg){
console.log("這是呼叫之前執行的方法");
alert("這是呼叫之前執行的方法");
console.log(obj,opt,flg);
},
checkAfter:function(obj,opt,flg){
console.log("這是呼叫之後執行的方法");
console.log(obj,opt,flg);
alert("這是呼叫之後執行的方法");
},
cheCallback:function(obj,opt,flg){
console.log("這是回撥函式的方法");
console.log(obj,opt,flg);
alert("這是回撥函式的方法");
}
},
{....},
....
]
* @param resultsFn: 驗證操作完成時執行的回撥函式。回撥函式返回引數： (驗證元素,驗證引數,驗證結果)
* @param initFileArray: 初始化檔案的陣列配置 形如：[{path:"./style.css",type:'css'},{path:"https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js",type:'js'}]
*/
"_initCheck":function(optionArrays,resultsFn,initFileArray){
//初始化需要的檔案
$._initExtendFile(initFileArray||[]);
$.each(optionArrays,function(index,options){
var _defaultOpts = $.extend({}, defaults, options); // 覆蓋外掛預設引數
var _selector=_defaultOpts["selector"];
var opts=chedefaultCache[_selector]=chedefaultCache[_selector]||_defaultOpts;
var $dom=$(_selector);
//註冊游標進入事件
// $dom.focus(function(){
// var val=$dom.val();
// });
//註冊游標離開事件 游標離開進行資料驗證
$dom.blur(function(){
var flg= checkVal($dom);
var _selector=$dom["selector"];
var opts=chedefaultCache[_selector];
if(typeof resultsFn=="function"){
flg= resultsFn($dom,opts,flg)
}
return flg;
});
var cs=opts["checkCss"];
(typeof cs=="string"&&cs!=undefined)&&(cs=eval("("+cs+")"));
(cs!=undefined)&&($dom.css(cs));
});
},
/**
* 儲存校驗
* @param resultsFn ($dom【元素物件】,opts【元素校驗配置引數】,flg【返回結果】)
* 校驗元素完成返回結果之前執行 【回撥函式】
*/
"_saveChe":function(resultsFn){
var flg=true;
for(var _selector in chedefaultCache){
var $dom=$(_selector);
if($dom==null||$dom==undefined){
continue;
}
flg= checkVal($dom);
if(flg==false){
return false;
}
var opts=chedefaultCache[_selector];
if(typeof resultsFn=="function"){
flg= resultsFn($dom,opts,flg)
}
}
return flg;
}
});
/**
* 校驗資料
* @param {要校驗的元素物件} $dom
*/
var checkVal=function($dom){
//判斷元素狀態，如果隱藏則不驗證
if(!$dom.is(':visible')||$dom.is(':hidden')){
return true;
}
var _select=$dom["selector"];
var _opts=chedefaultCache[_select];
var before=_opts["checkBefore"];
(typeof before=="function")&&(before($dom,_opts,flg));
var valList=$._getVal($dom);
var val=valList[0];
var msg="";
var flg=true;
var _cheCall=_opts["cheCallback"];
if((_opts["isEmpty"]&&val=="")||(typeof val=="object"&&val.length<=0&&_opts["isEmpty"])){
flg=true;
}else{
if((!_opts["isEmpty"]&&val=="")||(!_opts["isEmpty"]&&typeof val=="object"&&val.length<=0)){
flg=false;
msg=valList[1]=="select"?"您還沒有選擇,請選擇!"
:valList[1]=="radio"?"請選擇一項!"
:valList[1]=="checkbox"?"請最少選中一個！"
:"必填項，不能為空！";
}else{
if(typeof val=="string"){
//校驗長度
var cheType=_opts["checkType"];
max=_opts["maxLength"],min=_opts["minLength"];
var cheTypeStr=cheType.join(',');
if(cheTypeStr.indexOf("isInteger")>=0||cheTypeStr.indexOf("isDouble")>=0){
if(parseFloat(val)>max||parseFloat(val)<min){
flg=false;
msg="輸入數介於"+min+"-"+max+"之間";
}
}else{
if(val.length>max||val.length<min){
flg=false;
msg="請輸入 "+(min==max?min:(min+"-"+max))+" 位字元";
}
}
if(flg){
for(var i=0;i<cheType.length;i++){
var fun=cheType[i];
if(_cheType[fun]!=undefined){
flg=_cheType[fun](val,function(_val,_flg){
(typeof _cheCall=="function")&&(_flg=_cheCall($dom,_opts,_flg))
return _flg;
});
if(flg==false) break;
}else{
console.log("沒有找到驗證規則中包含："+fun);
}
}
}
}
}
}
//使用定義的樣式顯示錯誤資訊
if(flg){
$._cheSuccess($dom,_opts["showType"],flg,val,msg==""?_opts["message"]:msg);
}else{
$._cheError($dom,_opts["showType"],flg,val,msg==""?_opts["message"]:msg);
}
var after=_opts["checkAfter"];
(typeof after=="function")&&(after($dom,_opts,flg));
return flg;
}
/**
* 快取校驗的配置資訊
*/
var chedefaultCache={};
/**
* 校驗引數設定
*/
var defaults={
/**
* （必填）選擇器 和 jquery選擇器用法相同 ，支援 #id / .class / div div:eq(2)等 【字串】
*
*/
selector:"",
/**
* （必填）提示文字 【字串】
*/
message:"輸入非法，請重新輸入",
/**
* （推薦使用）校驗規則一組校驗規則 【陣列】
*/
checkType:[],
/**
* 顯示方式 1,2,3,4 上右下左四個方向 【標識字元】
*/
showType:2,
/**
* 最大長度 預設為18 【數字型別】
*/
maxLength:18,
/**
* 最小長度 預設為0 【數字型別】
*/
minLength:0,
/**
* 是否允許為空 true or false 【bool型別】
*/
isEmpty:false,
/**
* 校驗之前執行 的方法 【函式】
*/
checkBefore:null,
/**
* 校驗之後執行 的方法 【函式】
*/
checkAfter:null,
/**
* 回撥函式 ；在執行每個校驗規則時執行 【函式】
*/
cheCallback:null,
/**
* 定義需要校驗元素的樣式 ，在初始化時處理元素樣式 【鍵值物件】
*/
checkCss:{},
};
/**
* 定義校驗規則
*/
var _cheType={
/**
* 私有處理方法
*/
__regexVal:function(regex,val,callback){
var flg=regex.test(val);
if(typeof callback=="function"){
flg= callback(val,flg);
}
return flg;
},
/**
* 不為空
* @param val 值
* @param callback 回撥函式
*/
notNull:function(val,callback){
val=val.replace(/^\s/g,"").replace(/\s￥/g,"");
var flg=val.length>0;
if(typeof callback=="function"){
callback(val,flg);
}
},
/**
* 小數型別(1位小數) 0.1~999999999999999999.9
* @param callback 回撥函式
*/
isDouble1:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,1}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小數型別(2位小數) 0.01~999999999999999999.99
*/
isDouble2:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,2}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小數型別(3位小數) 0.001~999999999999999999.999
*/
isDouble3:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,3}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小數型別(4位小數) 0.0001~999999999999999999.9999
*/
isDouble4:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,4}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小數型別(5位小數) 0.00001~999999999999999999.99999
*/
isDouble5:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,5}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小數型別(6位小數) 0.000001~999999999999999999.999999
*/
isDouble6:function(val,callback){
regex=/^[0-9]{1,18}[.]?[0-9]{0,6}$/;
return this.__regexVal(regex,val,callback);
},
/**
*整數 1-18位
*/
isInteger:function(val,callback){
regex=/^[0-9]{1,18}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 大小寫 1-18位
*/
isLetter:function(val,callback){
regex=/^[a-zA-Z]{1,18}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 大寫 1-18位
*/
isUpperLetter:function(val,callback){
regex=/^[A-Z]{1,18}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 小寫 1-18位
*/
isLowerLetter:function(val,callback){
regex=/^[a-z]{1,18}$/;
return this.__regexVal(regex,val,callback);
},
/**
* 手機號
* 聯通現有號段是：130、131、132、155、156、186、185，其中3G專屬號段是：186、185。還有無線上網絡卡專屬號段：145。
移動現有號段是：134、135、136、137、138、139、150、151、152、157、158、159、182、183、188、187。
電信現有號段是：133、153、180、181、189。
*/
isPhone: function (val,callback) {
//130','131','132','133','134','135','136','137','138','139','145','150','151','152','153','155','156','157','158','159','180','181','182','183','185','186','187','188','189','170,6,7,8','1907'
regex = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
regex1 = /^0(([1,2]\d)|([3-9]\d{2}))\d{7,8}$/;
return this.__regexVal(regex,val,callback) ||this.__regexVal(regex1,val,callback);
},
/**
* 郵件
*/
isEmail: function (val,callback) {
regex = /\w+[@]\w+(\.\w+){1,2}/;
return this.__regexVal(regex,val,callback);
},
/**
* 中文字元
*/
isChinese: function (val,callback) {
regex = /^[\u4e00-\u9fa5]+$/;
return this.__regexVal(regex,val,callback);
},
/**
*除特殊符號外的任意字元
*/
isAnyChar:function(val,callback){
regex = /[\?\!\@\#\$\%\^\&\*\(\)\_\+\{\}\:\"\|\>\?\<-\=\[\]\;\'\\\/\.\,\`\~\！\@\#\￥\%\…\…\&\*\（\）\—\—\+\{\}\：\“\|\《\》\？\；\‘\、\，\。\、\【\】]/;
return !this.__regexVal(regex,val,callback);
},
/**
*除特殊符號外的任意字元
*/
isText:function(val,callback){
regex = /[\\]/;
return !this.__regexVal(regex,val,callback);
}
};
//快取錯誤資訊的html字元
var errorMsgHtml={}
/**
* 擴充套件jQuery物件本身,定義錯誤成功提示資訊
* 可從外部重寫
*/
$.extend({
/**
* 成功處理方法
*/
"_cheSuccess": function (obj,showType,flg,val,msg) {
var _select=$(obj)["selector"].replace(/'/g,"\'").replace(/"/g,"\'");
_select=_select==""?"[name='"+$(obj).attr("name")+"']":_select;
var tip=errorMsgHtml[_select];
if(tip!=null){
layer.close(tip)
}
$(obj)[0].style["border"]="1px solid #ccc";
$(obj)[0].style["backgroundColor"]="white";
return flg;
},
/**
* 錯誤處理方法
*/
"_cheError": function (obj,showType,flg,val,msg) {
//使用layui的 tips
var _select=$(obj)["selector"].replace(/'/g,"\'").replace(/"/g,"\'");
_select=_select==""?"[name='"+$(obj).attr("name")+"']":_select;
var tip=errorMsgHtml[_select];
if(tip!=null){
layer.close(tip)
}
var tip=layer.tips(msg,$(obj)["selector"], {time:0,tips: [showType,'#ff9800'],tipsMore: true });
errorMsgHtml[_select]=tip;
$(obj)[0].style["border"]="1px solid #ff9800";
$(obj)[0].style["backgroundColor"]="#f8f2e3";
return flg;
},
/**
* 初始化載入js,css檔案
*@param 形如 fileArray [{path:"./style.css",type:'css'}]
*/
"_initExtendFile":function(fileArray){
var optFile=[
{path:"/Member/resources/css/jquery.checkstyle.css",type:'css'},
{path:"/Member/resources/js/checkInput/layui.all.js",type:'js'},
];
if(fileArray!=undefined&&fileArray!=null){
optFile=$.extend({},optFile,fileArray);
}
$.each(optFile,function(index,item){
var type=item["type"];
if(type=="js"){
$.getScript(item["path"]);
}else{
$('head').append('<link rel="stylesheet" type="text/css" href="'+item["path"]+'">');
}
});
},
/**
* 定義得到函式值得方法
* @param {要獲取資料的jQuery物件，非DOM物件} $obj
*/
"_getVal":function($obj){
var type=$obj.prop("tagName")||$obj.type;
type=type.toLocaleLowerCase();
(type=="input")&&(type=$obj.attr("type"));
var val;
switch (type) {
case "radio":
var name=$obj.attr("name");
val=$("[name='"+name+"']:checked").val();
break;
case "checkbox":
val=[];
var name=$obj.attr("name");
var nameDom=$("[name='"+name+"']");
for(var i=0;i<nameDom.length;i++){
if(!nameDom[i].checked){continue;}
val.push(nameDom[i].value);
}
break;
default:
val=$obj.val();
break;
}
(typeof val=="string")&&(val=val.replace(/^\s/g,"").replace(/\s$/g,""));
(val==undefined)&&(val="");
return [val,type];
}
});
})(window.jQuery);
詳細用法
一。用前準備
1.儲存上文的CSS內容，檔名為：jquery.checkstyle.css
2.下載layer.all.js檔案檔名為：layui.all.js
3.儲存外掛的JS程式碼，檔名為：jquery.checkinput.js
4.下載的jquery.js檔案，檔名為：jquery.1.10.1.min.js
二。開始使用
1.新建一個的的test.html檔案
2.將以上檔案拷貝到同一個目錄
3.在HTML檔案中引入jQuery的檔案和jquery.checkinput.js
<script type="text/javaScript" src="jQuery.1.10.1.min.js"></script>
<script type="text/javaScript" src="jQuery.checkinput.js"></script>這樣外掛就已經引入進來了，樣式檔案在外掛中已經預設引入。在這之後，你也可以在外部重新定義預設引入檔案，如下
$._initExtendFile([
{path:"jquery.checkstyle.css",type:'css'},
{path:"layui.all.js",type:'js'}
])3.輸入框輸入型別='文字'輸入型別='密碼'判斷
一，建立在test.html中的頁面中建立輸入文字框
<input type="text" id="name" ><br/>二，初始化需要驗證的資訊
var check=[
{
selector:"#name", //外掛驗證的選擇器，和jquery用法一致
checkType:["isInteger"], //配置驗證規則
message:"(必填)名稱數字", //配置驗證不通過的提示資訊
//以下可選
maxLength:10, //輸入最大長度，預設為18
minLength:5, //輸入最小長度，預設為5
isEmpty:false, //是否為空，預設為false
//在進行校驗資料之前執行的回撥函式
checkBefore:function(obj,opt,flg){
console.log("這是呼叫之前執行的方法");
console.log(obj,opt,flg);
},
//在進行校驗資料之後執行的回撥函式
checkAfter:function(obj,opt,flg){
console.log("這是呼叫之後執行的方法");
console.log(obj,opt,flg);
},
//在資料校驗完成之後執行的回撥函式
cheCallback:function(obj,opt,flg){
console.log("驗證時：這是在驗證時呼叫的回撥函式方法");
console.log(obj,opt,flg);
return flg;
}
}
];
//這裡的this最好選擇小的範圍，比如當前的form $("[name='form']")._initCheck()
$(this)._initCheck();
通常情況下我們只需要配置前面三個屬性即可如下
var check=[ {
selector:"#name",
checkType:["isInteger"],
message:"(必填)名稱只能為數字"
}]當前的檢查為一個數組，陣列內可存放多個需要校驗的資料
比如，在test.html中的頁面中假如密碼框
<input type="password" id="password" ><br/>驗證名稱和密碼只需要如下配置即可
var check=[
{
selector:"#name",
checkType:["isInteger"],
message:"(必填)名稱只能為數字"
},
{
selector:"#password",
isEmpty:false,
checkType:["isAnyChar"],
message:"除特殊符號外的任意字元",
}
]角配置完成之後呼叫$（“[名稱='形式']”）._ initCheck（）方法進行驗證
4.選擇框，下拉框，單選框，多選框，配置如上。
注：單選框，多選框，必須具備name屬性且選擇器只能為“ [name ='名稱'] ”的形式
5.錯誤成功提示修改，只需重新$ ._ cheSuccess（OBJ，showType，FLG，纈氨酸，MSG）和$ ._ cheError（OBJ，showType，FLG，纈氨酸，MSG）方法即可
方法引數解釋
obj： 當前驗證元素的jquery物件
showType: 顯示方式，約定為layer中tips的四個值 1,2,3,4 上右下左四個方向
val: 當前驗證元素的值，這個值已近做過處理，分別去掉了兩側空格，將多選框的值將返回一個數組，其他返回為字串
msg: 返回的錯誤提示資訊例如，重新定義錯誤提示為彈框
$._cheError=function(obj,showType,val,msg){
alert(msg);
}6.校驗引數詳解，具體可以參考jquery.checkinput.js檔案，具備詳細的註釋
/**
* 校驗引數設定
*/
var defaults={
/**
* （必填）選擇器 和 jquery選擇器用法相同 ，支援 #id / .class / div div:eq(2)等 【字串】
*
*/
selector:"",
/**
* （必填）提示文字 【字串】
*/
message:"輸入非法，請重新輸入",
/**
* （推薦使用）校驗規則一組校驗規則 【陣列】
*/
checkType:[],
/**
* 顯示方式 1,2,3,4 上右下左四個方向 【標識字元】
*/
showType:2,
/**
* 最大長度 預設為18 【數字型別】
*/
maxLength:18,
/**
* 最小長度 預設為0 【數字型別】
*/
minLength:0,
/**
* 是否允許為空 true or false 【bool型別】
*/
isEmpty:false,
/**
* 校驗之前執行 的方法 【函式】
*/
checkBefore:null,
/**
* 校驗之後執行 的方法 【函式】
*/
checkAfter:null,
/**
* 回撥函式 ；在執行每個校驗規則時執行 【函式】
*/
cheCallback:null,
/**
* 定義需要校驗元素的樣式 ，在初始化時處理元素樣式 【鍵值物件】
*/
checkCss:{},
};7.儲存校驗$（“[name ='form']”）._ saveChe（）;
var flg=$("[name='form']")._saveChe();
alert(flg?"驗證通過","驗證不通過");此方法會返回一個布林型別的變數，只需要判斷此變數即可。
8._initCheck引數方法介紹，詳情可參考jquery.checkinput.js檔案
/**
* 根據定義的校驗資訊進行校驗資訊
* @param optionArrays: 需要驗證的引數配置，詳情參考下文defaults物件， 形如
[{
selector:"#name",
isEmpty:false,
checkType:["notNull","isChinese"],
message:"(必填)請輸入使用者名稱稱，名稱只能為漢字"
checkBefore:function(obj,opt,flg){
console.log("這是呼叫之前執行的方法");
alert("這是呼叫之前執行的方法");
console.log(obj,opt,flg);
},
checkAfter:function(obj,opt,flg){
console.log("這是呼叫之後執行的方法");
console.log(obj,opt,flg);
alert("這是呼叫之後執行的方法");
},
cheCallback:function(obj,opt,flg){
console.log("這是回撥函式的方法");
console.log(obj,opt,flg);
alert("這是回撥函式的方法");
}
},
{....},
....
]
* @param resultsFn: 驗證操作完成時執行的回撥函式。回撥函式返回引數： (驗證元素,驗證引數,驗證結果)
* @param initFileArray: 初始化檔案的陣列配置 形如：[{path:"./style.css",type:'css'},{path:"https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js",type:'js'}]
*/
function _initCheck(optionArrays,resultsFn,initFileArray)有興趣的朋友可以借鑑，如果轉載請指明出處。
如果使用外掛，請註明原創者
如果修改外掛，請釋出修改後的版本，讓此外掛更加完善，生態。