Jquery verifies the email format and displays the submit button _ jquery-js tutorial

This article mainly introduces jquery to verify the email format and display the submit button. The submit button is displayed only when the email address is entered correctly. For more information, see Brief tutorial
Simple, generous, and intuitive user interfaces are our favorite webpage designs. This article introduces such a design style.

How can we make the page simple, generous, and user-friendly? Most website forms use text prompts, prompting users where they are entered incorrectly and where they are incorrect, but we should be able to do better: if they are entered incorrectly, the submit button will not be displayed!
HTML Structure

JAVASCRIPT:
Check whether the entered text is a correct email address. If the entered text is correct, add a specific style to the form. Otherwise, do not add it. Use css to control whether the style is displayed.
Dependent on jQueryMethod:

$( 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 ); 

The above code is compatibleIE6 or aboveBrowser
If you want to disable this function, you can disable the namespace addClassWhenEmail.

$( '.newsletter input[type="email"]' ).off( '.addClassWhenEmail' );     

Do not use jQuery,Pure javascriptMethod:

;( 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 );  

The above code is compatible with IE8 + and all modern browsers.
Available Parameters
Here there are three parameters that can be used to change the selector:

var form  = '.newsletter',   // form selectorclassName = 'newsletter--active',  // class name for form when correct email is enteredemail  = 'input[type="email"]', // email input field selector   

CSS code
Js Code is used to change the style. css is used to hide the style:

.newsletter:not( .newsletter--active ) input[type='submit']{ display: none;} 

The above is the method for verifying the email format with jquery and displaying the submit button for everyone. I hope this will be helpful for everyone's learning.