自己编写jQuery插件之表单验证
自己編寫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插件之表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取元素个数
- 下一篇： hdu 4679 树的直径