jquery實現(xiàn)表單驗證簡單實例演示

更新時間：2015年11月23日 15:20:41 作者：similar

這篇文章向大家推薦了一個jquery實現(xiàn)表單驗證簡單實例演示，需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)表單驗證代碼。分享給大家供大家參考。具體如下：
運行效果截圖如下：

具體代碼如下：

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

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

(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: '請?zhí)顚憯?shù)字',
   tips_chinese: '請?zhí)顚懼形?,
   tips_mobile: '手機號碼格式有誤',
   tips_idcard: '身份證號碼格式有誤',
   tips_pwdequal: '兩次密碼不一致',

   //正則
   reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //驗證郵箱
   reg_num: /^\d+$/,         //驗證數(shù)字
   reg_chinese: /^[\u4E00-\u9FA5]+$/,     //驗證中文
   reg_mobile: /^1[3458]{1}[0-9]{9}$/,    //驗證手機
   reg_idcard: /^\d{14}\d{3}?\w$/      //驗證身份證
  };

  //不為空則合并參數(shù)
  if(options)
   $.extend(defaults, options);

  //獲?。ㄎ谋究?，密碼框，多行文本框），當失去焦點時，對其進行數(shù)據(jù)驗證
  $(":text,:password,textarea", root).each(function () {
   $(this).blur(function () {
    var _validate = $(this).attr("check"); //獲取check屬性的值
    if (_validate) {
     var arr = _validate.split(' '); //用空格將其拆分成數(shù)組
     for (var i = 0; i < arr.length; i++) {
      //逐個進行驗證，不通過跳出返回false,通過則繼續(xù)
      if (!check($(this), arr[i], $(this).val()))
       return false;
      else
       continue;
     }
    }
   })
  })

  //表單提交時執(zhí)行驗證,與上面的方法基本相同，只不過是在表單提交時觸發(fā)
  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) {
　　　　　　　//根據(jù)驗證情況，顯示相應提示信息，返回相應的值
   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);

先來說一說實現(xiàn)原理：

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

　　加上自定義check屬性，

　　然后獲取check屬性的值，多個值用空格分開。利用split()將其拆分為數(shù)組，在逐個調用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>
   數(shù)字：<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頁面的，因此你要自己創(chuàng)建個success.html，里面可以什么都不寫。

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

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

//圖片路徑
img_error: "img/error.gif",
img_success: "img/success.gif",

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

本文已被整理到了《jquery表單驗證大全》，歡迎大家學習閱讀。

以上就是本文的全部內容，希望能夠幫助大家找更好的掌握jquery驗證碼的實現(xiàn)方法。

您可能感興趣的文章:

基于jQuery解決ios10以上版本縮放問題
本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-11-11
jquery實現(xiàn)的用戶注冊表單提示操作效果代碼分享
這篇文章主要介紹了jquery實現(xiàn)的用戶注冊表單提示操作效果，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
JQuery datepicker 使用方法
jQuery UI很強大，其中的日期選擇插件Datepicker是一個配置靈活的插件，我們可以自定義其展示方式，包括日期格式、語言、限制選擇日期范圍、添加相關按鈕以及其它導航等
2011-05-05
jquery自定義表單驗證插件
這篇文章主要為大家詳細介紹了jquery自定義表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
jquery ajax 如何向jsp提交表單數(shù)據(jù)
ajax技術在做表單數(shù)據(jù)傳值非常棒，給用戶帶來很好的用戶體驗度，同時，使用jquery可以簡化開發(fā)，提高效率。下面給大家介紹jquery ajax 如何向jsp提交表單數(shù)據(jù)，需要的朋友可以參考下
2015-08-08
jQuery通過擴展實現(xiàn)抖動效果的方法
這篇文章主要介紹了jQuery通過擴展實現(xiàn)抖動效果的方法,涉及jQuery擴展的技巧及抖動特效的實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
jQuery 前的按鍵判斷代碼
剛看到個問題，如何得知同時按下了哪幾個鍵以及按鍵順序（難道是格斗游戲的組合鍵？），其實jQuery實現(xiàn)起來是很簡單的。
2010-03-03
JQuery validate插件驗證用戶注冊信息
這篇文章主要為大家詳細介紹了JQuery validate插件驗證用戶注冊信息的具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
jQueryMobile之Helloworld與頁面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實例分析了jQueryMobile的基礎用法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析
這篇文章主要介紹了jQuery實現(xiàn)文本顯示一段時間后隱藏的方法,結合實例形式分析了jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-06-06