首页>>表单>>自动验证输入的邮箱地址是否正确，正确的才出现提交框，可以用在邮件订阅的位置(2014-08-26)

自动验证输入的邮箱地址是否正确，正确的才出现提交框，可以用在邮件订阅的位置

自动验证输入的邮箱地址是否正确，正确的才出现提交框，可以用在邮件订阅的位置
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form class="newsletter" autocomplete="off" novalidate>  
  2.     <input type="email" value="" placeholder="Enter your email address" tabindex="1" class="newsletter-email" />  
  3.     <input type="submit" value="OK" tabindex="2" class="newsletter-submit" />  
  4. </form>  

 

JavaScript Code
  1. <script>  
  2.   
  3. ;( function( window, document, undefined )  
  4. {  
  5.     'use strict';  
  6.   
  7.     var form        = '.newsletter',  
  8.         className   = 'newsletter--active',  
  9.         email       = 'input[type="email"]',  
  10.   
  11.         addEventListener = function( element, event, handler )  
  12.         {  
  13.             element.addEventListener ? element.addEventListener( event, handler ) : element.attachEvent( 'on' + event, function(){ handler.call( element ); });  
  14.         },  
  15.         forEach = function( elements, fn )  
  16.         {  
  17.             for( var i = 0; i < elements.length; i++ ) fn( elements[ i ], i );  
  18.         },  
  19.         addClass = function( element, className )  
  20.         {  
  21.             element.classList ? element.classList.add( className ) : element.className += ' ' + className;  
  22.         },  
  23.         removeClass = function( element, className )  
  24.         {  
  25.             element.classList ? element.classList.remove( className ) : element.className += element.className.replace( new RegExp( '(^|\b)' + className.split( ' ' ).join( '|' ) + '(\b|$)', 'gi' ), ' ' );  
  26.         };  
  27.   
  28.     forEach( document.querySelectorAll( form ), function( $form )  
  29.     {  
  30.         var $email = $form.querySelectorAll( email );  
  31.   
  32.         if( $email.length )  
  33.         {  
  34.             $email = $email[ 0 ];  
  35.             addEventListener( $email, 'keyup', function()  
  36.             {  
  37.                 $email.value != '' && /^([w-.]+@([w-]+.)+[w-]{2,12})?$/.test( $email.value ) ? addClass( $form, className ) : removeClass( $form, className );  
  38.             });  
  39.         }  
  40.     });  
  41. })( window, document );  
  42.   
  43. /* 
  44.  
  45. jQuery version: 
  46.  
  47. $( function( $, window, document, undefined ) 
  48. { 
  49.     'use strict'; 
  50.  
  51.     var form        = '.newsletter', 
  52.         className   = 'newsletter--active', 
  53.         email       = 'input[type="email"]'; 
  54.  
  55.     $( form ).each( function() 
  56.     { 
  57.         var $form   = $( this ), 
  58.             $email  = $form.find( email ); 
  59.  
  60.         $email.on( 'keyup.addClassWhenEmail', function() 
  61.         { 
  62.             $form.toggleClass( className, $email.val() != '' && /^([w-.]+@([w-]+.)+[w-]{2,12})?$/.test( $email.val() ) ); 
  63.         }); 
  64.     }); 
  65. })( jQuery, window, document ); 
  66.  
  67. */  
  68.   
  69. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_413.html