jquery驗(yàn)證郵箱格式并顯示提交按鈕
簡(jiǎn)要教程
簡(jiǎn)潔、大方和直觀的用戶界面是我們最喜歡的網(wǎng)頁(yè)設(shè)計(jì)。本文介紹的正是這樣的一個(gè)設(shè)計(jì)風(fēng)格。


如何才能做到頁(yè)面的簡(jiǎn)潔大方并且人性化?大多數(shù)網(wǎng)站的表單采用文本提示的方法,提示用戶哪里填寫(xiě)錯(cuò)了,哪里不正確,但我們應(yīng)該能做得更好:填寫(xiě)不正確就不顯示提交按鈕!
HTML結(jié)構(gòu)
<form class="newsletter"> <input type="email" value="" placeholder="Enter your email address" /> <input type="submit" value="OK" /> </form>
JAVASCRIPT:
檢查輸入的文本是否為一個(gè)正確的email地址,如果正確,就給表單添加特定的樣式,否則不添加,通過(guò)css來(lái)控制這個(gè)樣式是否顯示按鈕。
依賴于jQuery的做法:
$( function( $, window, document, undefined )
{
'use strict';
var form = '.newsletter',
className = 'newsletter--active',
email = 'input[type="email"]';
$( form ).each( function()
{
var $form = $( this ),
$email = $form.find( email ),
val = '';
$email.on( 'keyup.addClassWhenEmail', function()
{
val = $email.val();
$form.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );
});
});
})( jQuery, window, document );
以上代碼兼容IE6以上的瀏覽器
如果你想關(guān)閉這項(xiàng)功能,可以通過(guò)關(guān)閉名稱空間addClassWhenEmail來(lái)實(shí)現(xiàn)。
$( '.newsletter input[type="email"]' ).off( '.addClassWhenEmail' );
不使用jQuery,純javascript的做法:
;( function( window, document, undefined )
{
'use strict';
var form = '.newsletter',
className = 'newsletter--active',
email = 'input[type="email"]',
addEventListener = function( element, event, handler )
{
element.addEventListener ? element.addEventListener( event, handler ) : element.attachEvent( 'on' + event, function(){ handler.call( element ); });
},
forEach = function( elements, fn )
{
for( var i = 0; i < elements.length; i++ ) fn( elements[ i ], i );
},
addClass = function( element, className )
{
element.classList ? element.classList.add( className ) : element.className += ' ' + className;
},
removeClass = function( element, className )
{
element.classList ? element.classList.remove( className ) : element.className += element.className.replace( new RegExp( '(^|\\b)' + className.split( ' ' ).join( '|' ) + '(\\b|$)', 'gi' ), ' ' );
};
forEach( document.querySelectorAll( form ), function( $form )
{
var $email = $form.querySelectorAll( email );
if( $email.length )
{
$email = $email[ 0 ];
addEventListener( $email, 'keyup', function()
{
$email.value != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( $email.value ) ? addClass( $form, className ) : removeClass( $form, className );
});
}
});
})( window, document );
以上代碼兼容IE8+以及所有現(xiàn)代瀏覽器。
可用參數(shù)
這里有三個(gè)參數(shù)可以用來(lái)改變選擇器:
var form = '.newsletter', // form selector className = 'newsletter--active', // class name for form when correct email is entered email = 'input[type="email"]', // email input field selector
CSS代碼
js代碼用來(lái)切換樣式,真正顯示于隱藏則通過(guò)css來(lái)實(shí)現(xiàn):
.newsletter:not( .newsletter--active ) input[type='submit']
{
display: none;
}
以上就是為大家分享的jquery驗(yàn)證郵箱格式并顯示提交按鈕的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
jQuery移除或禁用html元素點(diǎn)擊事件常用方法小結(jié)
這篇文章主要介紹了jQuery移除或禁用html元素點(diǎn)擊事件常用方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)onclick事件的禁用與屏蔽技巧,需要的朋友可以參考下2017-02-02
jQuery插件Skippr實(shí)現(xiàn)焦點(diǎn)圖幻燈片特效
Skippr 是一個(gè)超級(jí)簡(jiǎn)單的 jQuery 幻燈片插件。只是包括你的網(wǎng)頁(yè)中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能夠自適應(yīng)窗口寬度,而且導(dǎo)航是獨(dú)特的條形導(dǎo)航。2015-04-04
關(guān)于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結(jié)的jquery中attr()和prop()方法的區(qū)別,感興趣的朋友參考下2018-05-05
jQuery+css實(shí)現(xiàn)非常漂亮的水平導(dǎo)航菜單效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)非常漂亮的水平導(dǎo)航菜單效果,通過(guò)each方法遍歷元素再使用removeClass與addClass變換頁(yè)面元素樣式實(shí)現(xiàn)導(dǎo)航菜單的切換效果,需要的朋友可以參考下2016-07-07
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過(guò)jQuery示例代碼演示outerWidth()函數(shù)的具體用法,介紹的非常詳細(xì),有需要的朋友可以借鑒2015-07-07
基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過(guò)json數(shù)據(jù)來(lái)提供圖片地址和描述信息,同時(shí)也可以更換json數(shù)據(jù)來(lái)動(dòng)態(tài)切換不同的圖片,對(duì)json數(shù)據(jù)jquery幻燈片插件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08
Jquery實(shí)現(xiàn)自定義tooltip示例代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)自定義tooltip的方法,需要的朋友可以參考下2014-02-02

