基於jQuery的前端資料通用驗證庫

於是在之前的開發之中慢慢開始總結，也寫了一些零散的方法想要比較簡單的，寫更少的代碼來完成更多的驗證。之前採用的思路是傳遞參數，將要驗證的控制項的ID傳進去，若是要驗證資料格式再傳入相應的Regex進去。項目結束之後，再對整個項目做總結的時候發現，這種寫法也並沒有節省多少代碼量，而且很多地方因為同學反應說我寫的那個庫並不是很好用，雖然有說明，但他們也還是不能很好的理解，不能很快就上手,而且應該還是有不少BUG，所以很多地方他們還是寧願用那種對每個控制項去一一驗證的方式，一個JS檔案中光驗證的部分就得兩三百行的代碼，而且都比較懶，對於注釋是能少寫一句是一句，以致於出了問題之後維護起來也很麻煩，JS調試也還沒有一個很方便的工具。
最近也是在外出差，閒置時候我就在想，能不能在之前的基礎上封裝更多一點，然後調用更方便呢，最好是調用的時候不要再寫JS代碼最好。想起jQuery強大的選取器，以及之前做驗證的時候或者需要從頁面取值的時候經常給頁面元素加上了一些自訂的屬性。於是乎，想做驗證的時候只需要給元素加上幾個自訂的屬性，調用JS代碼就行，這樣應該是最簡單的了吧。
這個簡易的驗證庫，應該能完成90%的基本驗證，包括失去焦點時的驗證，以及點擊提交按鈕時的驗證。後端的那我就無能為辦了，只能是誰用就誰自個兒去寫了：）。
先上一段調用的代碼吧，JS代碼說少也不少了，就不直接貼出來了，文章後面上附件，還包括一個我之前自己寫的一個仿人人網的外掛程式的JS檔案。
複製代碼 代碼如下:
<script src="Js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Js/ks.ext.msgbox.js" type="text/javascript"></script>
<script src="Js/validata.js" type="text/javascript"></script>
<form name="form1" id="form1" action="#" method="post">
郵      箱：<input type="text" id="email" name="email"
validata="email" errormsg="郵箱格式不正確" emptyerrormsg="郵箱不可為空" empty="false" /><br />
手      機：<input type="text" name="phone" validata="phone"
errormsg="手機格式不正確" emptyerrormsg="手機不可為空" empty="true" /><br />
電      話：<input type="text" name="tel" validata="tel"
errormsg="電話格式不正確" emptyerrormsg="電話不可為空" empty="true" /><br />
身  份 證：<input type="text" name="idcard" validata="idcard" errormsg="身份證格式不正確"
emptyerrormsg="身份證不可為空" empty="false" /><br />
密      碼：<input type="password" name="pwd" validata="empty"
empty="false" emptyerrormsg="密碼不可為空" /><br />
確認密碼：<input type="password" name="pwd1" validata="password2" errormsg="確認密碼不可為空"
diffmsg="兩次密碼輸入不一致" /><br />
<input type="submit" id="submit1" value="Submit" />
</form>

比如驗證郵箱：
有時候郵箱我們是允許為空白的，但是一旦輸入了郵箱就要求郵箱是合法的。如果允許為空白就給empty賦值為true,那麼驗證庫將不對其做非空驗證。若為false或者empty屬性不加預設就為是不允許為空白的。 不允許為空白得加上一個emptyErrorMsg的屬性，用來顯示為空白時的錯誤資訊，若這個屬性缺少或者值為空白那麼顯示的就是一個紅色"*"，若不為空白就顯示這個屬性的值。然後就是對格式的驗證，是要對郵箱驗證，validata的值就是email,若不合法時就顯示另外一個自訂屬性errorMsg的值,errorMsg若缺少或者為空白顯示錯誤資訊也為紅色"*".
validata的值還是不能完全自訂的，已經在JS中自定好了。就是根據validata的值來返回不同的Regex。方法如下，然後可選的validata的值就是下列方法的regName的值。使用者若要據展直接再加上其他運算式就可以了。
複製代碼 代碼如下:
//根據不同的驗證內容，返回相應的Regex
function returnRegString(regName) {
if (regName == "email") {
return "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"; //郵箱
} else if (regName == "tel") {
return "^(86)?(-)?(0[0-9]{2,3})?(-)?([0-9]{7,8})(-)?([0-9]{3,5})?$"; //電話
} else if (regName == "phone") {
return "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; //手機
} else if (regName == "postcode") {
return "^([0-9]{6})$"; //郵編
} else if (regName == "number") {
return "^(0|([1-9]+[0-9]*))(.[0-9]+)?$"; //數字
} else if (regName == "decimal") {
return "^[0-9]+([.][0-9]+)?$"; //浮點
} else if (regName == "money") {
return "^([0-9])$"; //貨幣
} else if (regName == "website") { //網址
return "(http://|https://){0,1}[\w\/\.\?\&\=]+";
} else if (regName == "fax") { //傳真
return "^[+]{0,1}([0-9]){1,3}[ ]?([-]?(([0-9])|[ ]){1,12})+$";
} else if (regName == "int") { //整數
return "^(-){0,1}\d+$";
} else if (regName == "pInt") { //正整數
return "^\d+$";
} else if (regName == "nInt") { //負整數
return "^-\d+$";
} else if (regName == "nandl") { //數字與字母
return "[a-zA-Z0-9]";
} else if (regName == "chinese") { //是否含有中文字元
return "[\u4e00-\u9fa5]";
}
}

廢話不多說了，該驗證庫也還沒有很完整的測試，各位大牛們若是有興趣試用一下，發現什麼問題或者其他更好的改進方法一定請告訴小弟。雖然肯定有現成的而且比較成熟的JS驗證庫了，但是我想自己寫一個出來。再來一張吧，點擊按鈕時若未通過驗證則彈出層提示哪個地方未通過驗證，彈出層就是我之前自己寫的仿人人網效果的彈出層效果。