jquery實(shí)現(xiàn)簡(jiǎn)易驗(yàn)證插件封裝
本文實(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');
更多內(nèi)容請(qǐng)參考《jquery表單驗(yàn)證大全》 ,歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)簡(jiǎn)單全選框
- jQuery實(shí)現(xiàn)日歷效果
- jQuery實(shí)現(xiàn)簡(jiǎn)單三級(jí)聯(lián)動(dòng)效果
- 解決IDEA JSP沒有代碼提示問題的幾種方法
- 解決IDEA中Maven項(xiàng)目中JSTL標(biāo)簽無(wú)效問題
- 在Intellij Idea中使用jstl標(biāo)簽庫(kù)的方法
- idea2017建立jsp工程及tomcat配置教程
- 淺談idea live template高級(jí)知識(shí)_進(jìn)階(給方法,類,js方法添加注釋)
- 通過圖例了解IDEA引入JQuery實(shí)現(xiàn)步驟
相關(guān)文章
一個(gè)背景云變換js特效 鼠標(biāo)移動(dòng)背景云變化
分享一個(gè)背景云變換js特效隨著鼠標(biāo)的移動(dòng),背景云會(huì)不斷的變化位置和形狀,感興趣的朋友可以研究下2012-12-12基于jQuery倒計(jì)時(shí)插件實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果
倒計(jì)時(shí)在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計(jì)時(shí),團(tuán)購(gòu)網(wǎng)站中的優(yōu)惠活動(dòng)倒計(jì)時(shí)等等。今天,我們來使用jQuery倒計(jì)時(shí)超級(jí)實(shí)現(xiàn)團(tuán)購(gòu)秒殺效果,感興趣的朋友一起學(xué)習(xí)吧2016-05-05探討在JQuery和Js中,如何讓ajax執(zhí)行完后再繼續(xù)往下執(zhí)行
查了不少資料,最后,還是jquery指南的書上找到了詳細(xì)的參數(shù)(async: false,),做好后,示例代碼放上,如下所示,需要的朋友可以參考下2013-07-07淺談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流
下面小編就為大家?guī)硪黄獪\談事件冒泡、事件委托、jQuery元素節(jié)點(diǎn)操作、滾輪事件與函數(shù)節(jié)流。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07BootStrap中jQuery插件Carousel實(shí)現(xiàn)輪播廣告效果
輪播廣告在網(wǎng)站中的應(yīng)用實(shí)在是太常見了,下面說一說怎樣使用bootstrap中的Carousel插件來實(shí)現(xiàn)輪播廣告效果,感興趣的朋友一起看看吧2017-03-03jquery實(shí)現(xiàn)手風(fēng)琴展開效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)手風(fēng)琴展開效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07