自己編寫jQuery插件之表單驗證

吐個嘈先：最近狀態不咋滴，真是什么都不想干，不想上班，做什么都沒動力，覺得沒意思。不想這樣，不想這樣，快讓這種情緒消失吧，忽忽....

表單驗證在項目中用的還是比較多的，公司當前正在做的項目就要用到，故此寫了此插件，先給大家看下在項目中應用的效果圖吧：

直接上插件實現代碼了，圍繞代碼進行講解比較容易點：

?

/*

描述：基于jquery的表單驗證插件。

時間：2014-8-3

作者：similar（281542025@qq.com）

*/

?

(function ($) {

??? $.fn.checkForm = function (options) {

??????? var root = this; //將當前應用對象存入root

?

??????? var isok = false; //控制表單提交的開關

?

??????? var pwd1; //密碼存儲

??????? var defaults = {

??????????? //圖片路徑

??????????? img_error: "img/error.gif",

??????????? img_success: "img/success.gif",

?

??????????? //提示信息

??????????? tips_success: '', //驗證成功時的提示信息，默認為空

??????????? tips_required: '不能為空',

??????????? tips_email: '郵箱地址格式有誤',

??????????? tips_num: '請填寫數字',

??????????? tips_chinese: '請填寫中文',

??????????? tips_mobile: '手機號碼格式有誤',

??????????? tips_idcard: '身份證號碼格式有誤',

??????????? tips_pwdequal: '兩次密碼不一致',

?

??????????? //正則

??????????? reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i,? //驗證郵箱

??????????? reg_num: /^\d+$/,????????????????????????????????? //驗證數字

??????????? reg_chinese: /^[\u4E00-\u9FA5]+$/,???????????????? //驗證中文

??????????? reg_mobile: /^1[3458]{1}[0-9]{9}$/,??????????????? //驗證手機

??????????? reg_idcard: /^\d{14}\d{3}?\w$/???????????????????? //驗證身份證

??????? };

?

??????? //不為空則合并參數

??????? if(options)

??????????? $.extend(defaults, options);

?

??????? //獲取（文本框，密碼框，多行文本框），當失去焦點時，對其進行數據驗證

??????? $(":text,:password,textarea", root).each(function () {

??????????? $(this).blur(function () {

??????????????? var _validate = $(this).attr("check"); //獲取check屬性的值

??????????????? if (_validate) {

??????????????????? var arr = _validate.split(' '); //用空格將其拆分成數組

??????????????????? for (var i = 0; i < arr.length; i++) {

??????????????????????? //逐個進行驗證，不通過跳出返回false,通過則繼續

??????????????????????? if (!check($(this), arr[i], $(this).val()))

??????????????????????????? return false;

??????????????????????? else

??????????????????????????? continue;

??????????????????? }

??????????????? }

??????????? })

??????? })

?

??????? //表單提交時執行驗證,與上面的方法基本相同，只不過是在表單提交時觸發

??????? function _onSubmit() {

??????????? isok = true;

??????????? $(":text,:password,textarea", root).each(function () {

??????????????? var _validate = $(this).attr("check");

??????????????? if (_validate) {

??????????????????? var arr = _validate.split(' ');

??????????????????? for (var i = 0; i < arr.length; i++) {

??????????????????????? if (!check($(this), arr[i], $(this).val())) {

?? ?????????????????????????isok = false; //驗證不通過阻止表單提交，開關false

??????????????????????????? return; //跳出

??????????????????????? }

??????????????????? }

??????????????? }

??????????? });

??????? }

?

??????? //判斷當前對象是否為表單，如果是表單，則提交時要進行驗證

??????? if (root.is("form")) {

??????????? root.submit(function () {

??????????????? _onSubmit();

??????????????? return isok;

??????????? })

??????? }

?

?

??????? //驗證方法

??????? var check = function (obj, _match, _val) {
　　　　　　　//根據驗證情況，顯示相應提示信息，返回相應的值

??????????? switch (_match) {

??????????????? case 'required':

??????????????????? return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);

??????????????? case 'email':

??????????????????? return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);

??????????????? case 'num':

??????????????????? return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);

??????????????? case 'chinese':

??????????????????? return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);

??????????????? case 'mobile':

??????????????????? return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);

??????????????? case 'idcard':

??????????????????? return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);

??????????????? case 'pwd1':

??????????????????? pwd1 = _val; //實時獲取存儲pwd1值

??????????????????? return true;

??????????????? case 'pwd2':

??????????????????? return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);

??????????????? default:

??????????????????? return true;

??????????? }

??????? }

?

?

??????? //判斷兩次密碼是否一致(返回bool值)

??????? var pwdEqual = function(val1, val2) {

??????????? return val1 == val2 ? true : false;

??????? }

?

?

??????? //正則匹配(返回bool值)

??????? var chk = function (str, reg) {

??????????? return reg.test(str);

??????? }

?

??????? //顯示信息

??????? var showMsg = function (obj, msg, mark) {

??????????? $(obj).next("#errormsg").remove();//先清除

??????????? var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";

??????? ????if (mark)

??????????????? _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";

??????????? $(obj).after(_html);//再添加

?????? ?????return mark;

??????? }

??? }

})(jQuery);

?

注釋已經講解了大部分內容了，多數人一看就懂了。

實現原理：

　　首先定義好正則，和相應的提示信息，

　　加上自定義check屬性，

　　然后獲取check屬性的值，多個值用空格分開。利用split()將其拆分為數組，在逐個調用check()方法進行驗證。

　　之后通過驗證的返回值來確定顯示的信息。

這里有兩個驗證是比較特別的，就是：

1.驗證是否為空 （required）

2.兩次密碼是否一致 （pwd2）

這兩個都沒有用到正則，因為根本就用不上。 兩次密碼是否一致 ，單獨寫了個方法 pwdEqual();

插件里的驗證正則我只寫了幾個 ，如果不夠用可以自行擴展添加。

擴展只需3步：

1.添加正則，

2.添加相應提示信息，

3.check()方法中添加相應 case 處理

插件使用說明：

　　1.給表單下要進行驗證的文本框，密碼框 ，多行文本框加上自定義check屬性

　　2.多個格式驗證用空格間隔，如（同時驗證必填和郵箱）： check="required email"

　　3.如果要驗證兩次密碼是否一致，則pwd1和pwd2一起使用，如下圖：

?

　　　pwd1存儲第一次輸入的值，pwd2存儲第二次輸入的值，如果你只用pwd1還好。

　　　但如果只用了pwd2，則驗證是始終無法通過的。

下面給出DEMO示例代碼：

?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

??? <title>表單驗證插件</title>

</head>

<body>

??? <form id="myform" method="post" action="success.html">

??????? <ul>

??????????? <li>

??????????? 郵箱：<input type="text" name="email" check="required email" />

??????????? </li>

??????????? <li>

??????????? 密碼：<input type="password" check="required pwd1" />

??????????? </li>

??????????? <li>

??????????? 確認密碼：<input type="password" check="required pwd2" />

??????????? </li>

??????????? <li>

??????????? 手機：<input type="text" name="num" check="required mobile" />

??????????? </li>

??????????? <li>

??????????? 數字：<input type="text" name="num" check="required num" />

??????????? </li>

??????????? <li>

??????????? 地址：<textarea cols="5" rows="5" check="required"></textarea>

??????????? </li>

??????????? <li>

??????????? 不加check驗證的文本框：<input type="text" name="num" />

??????????? </li>

??????? </ul>

??????? <input type="submit" value="提交" />

??? </form>

??? <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>

??? <script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>

??? <script type="text/javascript">

??????? $("#myform").checkForm();

??? </script>

</body>

</html>

?

示例效果圖片：

?

示例代碼，成功提交是會跳轉到success.html頁面的，因此你要自己創建個success.html，里面可以什么都不寫。

但是，只要有一個驗證不通過，就不會成功跳轉。

另外，你或許還需要2張圖片：

//圖片路徑

?img_error: "img/error.gif",

?img_success: "img/success.gif",

?上傳在這了，自己右鍵另存為吧。

語文沒學好，語言組織能力，及表達能力實在是欠缺。自己理解了，卻無法很好的講出來，無奈。

大家如果還有什么不明白的可以留言，或者對上面代碼有什么建議的也請留言(討論出最好結果)，又或者發現了bug的，麻煩及時告知，謝謝！

?

轉載于:https://www.cnblogs.com/taofx/p/4139924.html

總結

以上是生活随笔為你收集整理的自己编写jQuery插件之表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。