jquery實(shí)現(xiàn)簡(jiǎn)易驗(yàn)證插件封裝

更新時(shí)間：2020年09月13日 16:45:48 作者：啊哈！前端

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)易驗(yàn)證插件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了封裝jquery簡(jiǎn)易驗(yàn)證插件的具體代碼，供大家參考，具體內(nèi)容如下

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>jQuery數(shù)據(jù)校驗(yàn)插件開發(fā)</title>
 <link rel="stylesheet" href="css/register.css" />
 <link rel="stylesheet" href="css/validate.css" />
</head>
<body>
 <main>
 <section>
 <form method="post" action="result.html" ac id="register">
 <div class="register-wrap">
 <div class="register">
 <ul>
 <li>
 <label for="username">用戶名：</label>
 <input type="text" id="username" name="username" tabindex="1" class="format-input" placeholder="請(qǐng)輸入用戶名" data-vt-required-msg="用戶名不能為空" data-vt-regexp-msg="用戶名必須是以字母、數(shù)字、下劃線組成,且不能以數(shù)字開頭(6-20位)" data-vt-required=true data-vt-regexp='^[\w_]\w{5,19}$' autofocus>
 </li>
 <li>
 <label for="pwd">密碼：</label>
 <input type="password" id="pwd" name="password" tabindex="2" class="format-input" placeholder="請(qǐng)輸入密碼" data-vt-required=true data-vt-regexp="^[a-zA-Z_][\w_]{5,11}$" data-vt-required-msg="密碼不能為空" data-vt-regexp-msg="密碼必須是由字母、數(shù)字、下劃線組成，且不能以數(shù)字開頭(6-12位)" >
 </li>
 <li>
 <label for="confirmPwd">確認(rèn)密碼：</label>
 <input type="password" id="confirmPwd" name="password" tabindex="3" class="format-input" placeholder="請(qǐng)?jiān)俅屋斎朊艽a" data-vt-required=true data-vt-required-msg="密碼不能為空" data-vt-equals=true data-vt-equals-msg="兩次密碼不一致">
 </li>
 <li>
 <label for="phone">手機(jī)號(hào)：</label>
 <input type="text" id="phone" name="phone" tabindex="4" class="format-input" placeholder="請(qǐng)輸入手機(jī)號(hào)" data-vt-required=true data-vt-phone=true data-vt-required-msg="手機(jī)號(hào)不能為空" data-vt-phone-msg="手機(jī)號(hào)不合法">
 </li>
 <li>
 <label for="tel">座機(jī)：</label>
 <input type="text" id="tel" name="tel" tabindex="5" class="format-input" placeholder="請(qǐng)輸入座機(jī)號(hào)碼" data-vt-required=true data-vt-tel=true data-vt-required-msg="座機(jī)號(hào)不能為空" data-vt-tel-msg="座機(jī)號(hào)不合法">
 </li>
 <li>
 <label for="email">郵箱：</label>
 <input type="text" id="email" name="email" tabindex="6" class="format-input" placeholder="請(qǐng)輸入郵箱地址" data-vt-required=true data-vt-email=true data-vt-required-msg="郵箱不能為空" data-vt-email-msg="郵箱不合法" >
 </li>
 <li>
 <label for="submitBtn"></label>
 <input type="submit" value="注冊(cè)" id="submitBtn" tabindex="7" class="format-input submit-btn">
 </li>
 </ul>
 </div>
 </div>
 </form>
 </section>
 </main>
 <script src="js/jquery2.0.js"></script>
 <script src="js/formValidate.js"></script>
 <script>
 $(function(){
 $('#register').formValidate();
 });
 </script>
</body>
</html>

css部分

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}
ul li {
 list-style: none;
 position: relative;
}
input {
 outline: 0;
}
.format-input {
 display: inline-block;
 width: 84%;
 height: 35px;
 padding: 0 0 0 3px;
 border: 1px solid #fff;
 vertical-align: baseline;
}
:focus {
 outline: 4px solid #007fff;
}
html,
body {
 width: 100%;
 height: 100%;
}
body {
 min-height: 100%;
 font: 12px/1.5 'Microsoft YaHei', arial, sans-serif;
 background: url(../image/bj.jpg) no-repeat;
 background-size: cover;
 overflow: hidden;
}
.register-wrap {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 width: 450px;
 height: 415px;
 margin: auto;
 background: rgba(0, 0, 0, 0.5);
}
.register {
 width: 100%;
 height: 100%;
 padding: 20px 30px;
 color: #fff;
}
.register > ul > li {
 font-size: 0;
 margin: 0 0 20px 0;
}
.register > ul > li label {
 display: inline-block;
 width: 16%;
 font-size: 12px;
}
.submit-btn {
 border: 1px solid transparent;
 font-size: 18px;
 font-weight: bold;
 color: #fff;
 background: #51a8ff;
 box-shadow: 1px 1px #AFC4EA,
  2px 2px #AFC4EA,
  3px 3px #AFC4EA;
}
.submit-btn:hover {
 cursor: pointer;
}
.submit-btn:focus {
 outline: none;
 border: 1px solid #f0f3f9;
}
.submit-btn:active {
 border: 1px solid #f0f3f9;
 transform: translate(1px, 1px);
 box-shadow: 1px 1px #AFC4EA,
   2px 2px #AFC4EA;
 
}

提示錯(cuò)誤的tips樣式：

.validate-error-tip {
 position: absolute;
 top: 0;
 left: 0;
 display: table;
 min-width: 150px;
 min-height: 35px;
 font-size: 12px;
 border: 1px solid lightblue;
 padding: 5px;
 background: #fff;
 color: #666;
 z-index: 9999;
}
.validate-error-tip:before {
 position: absolute;
 top: 0;
 left: -15px;
 display: block;
 content: '';
 width: 0;
 height: 0;
 border-color: transparent lightblue transparent transparent;
 /*1、下邊框有顏色 對(duì)應(yīng)著上邊框沒有寬度,是正三角形；2、上邊框有顏色 對(duì)應(yīng)著下邊框沒寬度，是倒三角形*/
 border-style: solid;
 border-width: 15px 15px 15px 0;
}

javascript部分：

(function($, factory, pluginName) {
 
 factory($, pluginName);
 
})(jQuery, function($, pluginName){
 
 //插件默認(rèn)配置項(xiàng)
 var __DEFAULT__ = {
 
 //默認(rèn)觸發(fā)驗(yàn)證的事件為input事件
 initEvent: 'input',
 prefix: 'vt' //自定義屬性前綴
 };
 
 //插件內(nèi)部編寫校驗(yàn)規(guī)則
 var __RULES__ = {
 
 //正則
 regexp: function(ruleData) {
  return new RegExp(ruleData).test(this.val());
 },
 
 //必填項(xiàng)
 required: function(ruleData) {
  return $.trim(this.val()).length > 0;
 },
 
 //最小值
 minLength: function(ruleData) {
  return $.trim(this.val()).length > ruleData ;
 },
 
 //最大值
 maxLength: function(ruleData) {
  return $.trim(this.val()).length < ruleData;
 },
 
 //驗(yàn)證兩次密碼是否一致
 isEquals: function(ruleData) {
  var pwd = $(':password').eq(0); //$(':password')[0]是什么對(duì)象呢？
  return pwd.val() === this.val();
 },
 
 //是否是郵箱
 isEmail: function(ruleData) {
  return /\w+@\w+\..+/g.test(this.val());
 },
 
 //是不是手機(jī)號(hào)
 isPhone: function(ruleData) {
  return /^1\d{10}$/g.test(this.val());
 },
 
 //是不是座機(jī)號(hào)碼
 isTel: function(ruleData) {
  return /^0\d{2,3}-\d{7,8}$/g.test(this.val());
 }
 };
 
 $.fn[pluginName] = function(options) {
 
 //標(biāo)識(shí)是否提交表單
 var $this = this;
 
 if(!$this.is('form')) { return; }
 
 //this: 這里的this是jQuery實(shí)例對(duì)象
 $this.$file = $this.find('input:not([type="button"][type="submit"])'); //給當(dāng)前實(shí)例對(duì)象(也就是調(diào)用該插件的jquery對(duì)象)添加一個(gè)$file的屬性
 
 $.extend($this, __DEFAULT__, options); //以默認(rèn)配置為優(yōu)先，以用戶配置為覆蓋
 
 //格式化rule規(guī)則。
 // 將一個(gè)字符串在每一個(gè)大寫字母前加上一個(gè)'-',并且全部轉(zhuǎn)為小寫
 // vtEmailMsg > vt-email-msg
 $this.formatRule = function(str, connector) {
 
  if(typeof str !== 'string') {
  return str;
  }
 
  //使用replace、正則(匹配單個(gè)大寫字母)
  str = str.replace(/[A-Z]/g,function(match, index) {
  if(index === 0) { return match.toLowerCase() }
  return connector + match.toLowerCase();
  });
  return str;
 };
 
 //顯示錯(cuò)誤信息
 $this.showErrorTip = function(errorMsg) {
  var $tip = $("<div class='validate-error-tip'> </div>"),
  offset = this.position(),
  elHeight = this.outerHeight(),
  elWidth = this.outerWidth();
 
  if(this.siblings('.validate-error-tip').length > 0){
  this.siblings('.validate-error-tip').eq(0).text(errorMsg).show();
  } else {
  $tip.text(errorMsg).
   css({
   top: offset.top,
   left: offset.left + elWidth + 15,
   width: $tip.width()
   });
  this.after($tip);
  $tip.show();
  }
 };
 
 //監(jiān)聽form表單里所有的input的事件
 $this.$file.on(this.initEvent, function(){
 
  var $input = $(this);
 
  //清除錯(cuò)誤提示框
  $input.siblings('.validate-error-tip').remove();
 
  //注意這里是循環(huán)的我們插件的規(guī)則，而不是用戶擁有的規(guī)則
  $.each(__RULES__, function(key, fn) {
  var rule = '',
   errorMsg = '';
 
  //如果key是以is字符開頭、則去掉is
  if(key.indexOf('is') === 0) {
   key = key.slice(2);
  }
 
  key = $this.formatRule(key, '-'); //將規(guī)則格式化為html中書寫的形式
  rule = $input.data(__DEFAULT__.prefix + '-' + key); //獲取規(guī)則的值
  errorMsg = $input.data(__DEFAULT__.prefix + '-' + key + '-msg'); //規(guī)則對(duì)應(yīng)的提示信息
 
  //如果當(dāng)前input有這個(gè)規(guī)則，則執(zhí)行這個(gè)規(guī)則
  if(rule) {
 
   //執(zhí)行規(guī)則測(cè)試是否通過
   var isPassed = fn.call($input, rule); //改變規(guī)則函數(shù)fn執(zhí)行時(shí)候的this，指向當(dāng)前input jquery對(duì)象
 
   if(!isPassed) {
   //未通過、則錯(cuò)誤提示
   $this.showErrorTip.call($input, errorMsg);
   }
  }
  });
 });
 
 //綁定提交表單的事件
 this.on('submit', function(e) {
  var isFormPassed = true;
 
  $this.$file.trigger($this.initEvent);
 
  $this.$file.each(function(index, current){
  var $current = $(current);
 
  if($current.siblings('.validate-error-tip').is(':visible')){
   isFormPassed = false;
   return false;
  }
 
  });
 
  if(!isFormPassed) {
  return isFormPassed;
  }
 });
 };
 
 //擴(kuò)展新的驗(yàn)證規(guī)則(實(shí)際上就是擴(kuò)展上面__RULES__對(duì)象)
 $.fn[pluginName].addRule = function(options) {
 
 $.extend(__RULES__, options);
 }
}, 'formValidate');