jquery verifies the mailbox format and displays the Submit button _jquery

Brief tutorial
The simple, generous and intuitive user interface is our favorite Web design. This article is about the design of such a style.

How to make the page simple and generous and humane? Most of the Web site's form using text prompts the method, prompting the user where to fill out the wrong, where is not correct, but we should be able to do better: fill out incorrectly do not show the Submit button!
HTML Structure

<form class= "Newsletter" >
 <input type= "email" value= "" placeholder= "Enter your email address"/>
 <input type= "Submit" value= "OK"/>
</form>   

Javascript:
Check that the input text is a correct email address, if correct, add a specific style to the form, otherwise do not add, through CSS to control whether the style shows the button.
The practice of relying on 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));
  });
 

Above code compatible with IE6 above browser
If you want to turn off this feature, you can do so by closing the namespace Addclasswhenemail.

$ ('. Newsletter input[type= ' email] '). Off ('. Addclasswhenemail ');     

Do not use jquery, pure javascript practices:

;(function (window, document, undefined) {' Use strict '; var form = '. Newsletter ', className = ' newsletter--active ', email = ' input[type= ' email] ', AddEventListener = Fu Nction (element, event, handler) {Element.addeventlistener Element.addeventlistener (event, handler): ELEMENT.A
  Ttachevent (' on ' + event, function () {Handler.call (element);});
  The 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.cla
  Ssname + = ' + className; }, Removeclass = function (element, className) {element.classlist? Element.classList.remove (className): Eleme  Nt.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 are three parameters that can be used to change the selector:

var form  = '. Newsletter ',   //form selector
className = ' newsletter--active ',  //class name for form when C Orrect Email is entered
email  = ' input[type= ' email '] ',//email input field Selector   

CSS Code
JS code to switch styles, the real display in the hidden through the CSS to achieve:

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

The above is for you to share the jquery verification mailbox format and display the Submit button method, hope for everyone's learning help.