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

2019-11-20 11:11:42

字體：大中小

供稿：網(wǎng)友

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

具體代碼如下：

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

/*描述：基于jquery的表單驗(yàn)證插件。*/(function ($) { $.fn.checkForm = function (options) {  var root = this; //將當(dāng)前應(yīng)用對(duì)象存入root  var isok = false; //控制表單提交的開關(guān)  var pwd1; //密碼存儲(chǔ)  var defaults = {   //圖片路徑   img_error: "img/error.gif",   img_success: "img/success.gif",   //提示信息   tips_success: '', //驗(yàn)證成功時(shí)的提示信息，默認(rèn)為空   tips_required: '不能為空',   tips_email: '郵箱地址格式有誤',   tips_num: '請(qǐng)?zhí)顚憯?shù)字',   tips_chinese: '請(qǐng)?zhí)顚懼形?,   tips_mobile: '手機(jī)號(hào)碼格式有誤',   tips_idcard: '身份證號(hào)碼格式有誤',   tips_pwdequal: '兩次密碼不一致',   //正則   reg_email: /^/w+/@[a-zA-Z0-9]+/.[a-zA-Z]{2,4}$/i, //驗(yàn)證郵箱   reg_num: /^/d+$/,         //驗(yàn)證數(shù)字   reg_chinese: /^[/u4E00-/u9FA5]+$/,     //驗(yàn)證中文   reg_mobile: /^1[3458]{1}[0-9]{9}$/,    //驗(yàn)證手機(jī)   reg_idcard: /^/d{14}/d{3}?/w$/      //驗(yàn)證身份證  };  //不為空則合并參數(shù)  if(options)   $.extend(defaults, options);  //獲取（文本框，密碼框，多行文本框），當(dāng)失去焦點(diǎn)時(shí)，對(duì)其進(jìn)行數(shù)據(jù)驗(yàn)證  $(":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++) {      //逐個(gè)進(jìn)行驗(yàn)證，不通過跳出返回false,通過則繼續(xù)      if (!check($(this), arr[i], $(this).val()))       return false;      else       continue;     }    }   })  })  //表單提交時(shí)執(zhí)行驗(yàn)證,與上面的方法基本相同，只不過是在表單提交時(shí)觸發(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; //驗(yàn)證不通過阻止表單提交，開關(guān)false       return; //跳出      }     }    }   });  }  //判斷當(dāng)前對(duì)象是否為表單，如果是表單，則提交時(shí)要進(jìn)行驗(yàn)證  if (root.is("form")) {   root.submit(function () {    _onSubmit();    return isok;   })  }  //驗(yàn)證方法  var check = function (obj, _match, _val) {　　　　　　　//根據(jù)驗(yàn)證情況，顯示相應(yīng)提示信息，返回相應(yīng)的值   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; //實(shí)時(shí)獲取存儲(chǔ)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);

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

首先定義好正則，和相應(yīng)的提示信息，

　　加上自定義check屬性，

　　然后獲取check屬性的值，多個(gè)值用空格分開。利用split()將其拆分為數(shù)組，在逐個(gè)調(diào)用check()方法進(jìn)行驗(yàn)證。

　　之后通過驗(yàn)證的返回值來確定顯示的信息。

這里有兩個(gè)驗(yàn)證是比較特別的，就是：

1.驗(yàn)證是否為空（required）

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

這兩個(gè)都沒有用到正則，因?yàn)楦揪陀貌簧稀?兩次密碼是否一致，單獨(dú)寫了個(gè)方法 pwdEqual();

插件里的驗(yàn)證正則我只寫了幾個(gè) ，如果不夠用可以自行擴(kuò)展添加。

擴(kuò)展只需3步：

1.添加正則，

2.添加相應(yīng)提示信息，

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

插件使用說明：

　　1.給表單下要進(jìn)行驗(yàn)證的文本框，密碼框，多行文本框加上自定義check屬性

　　2.多個(gè)格式驗(yàn)證用空格間隔，如（同時(shí)驗(yàn)證必填和郵箱）： check="required email"

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

pwd1存儲(chǔ)第一次輸入的值，pwd2存儲(chǔ)第二次輸入的值，如果你只用pwd1還好，但如果只用了pwd2，則驗(yàn)證是始終無法通過的。

下面給出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>表單驗(yàn)證插件</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>   確認(rèn)密碼：<input type="password" check="required pwd2" />   </li>   <li>   手機(jī)：<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驗(yàn)證的文本框：<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>

示例效果圖片：