首页>>表单>>Js表单验证 email验证(2014-06-07)

Js表单验证 email验证

Js表单验证 email验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="contact-form" action="/" method="post">  
  2.               
  3.             <div>  
  4.                 <label>  
  5.                     <span>Name: (required)</span>  
  6.                     <input placeholder="Please enter your name" type="text" tabindex="1" required autofocus>  
  7.                 </label>  
  8.             </div>  
  9.             <div>  
  10.                 <label>  
  11.                     <span>Email: (required)</span>  
  12.                     <input placeholder="Please enter your email address" type="email" tabindex="2" required>  
  13.                 </label>  
  14.             </div>  
  15.             <div>  
  16.                 <label>  
  17.                     <span>Telephone: (required)</span>  
  18.                     <input placeholder="Please enter your number" type="tel" tabindex="3" required>  
  19.                 </label>  
  20.             </div>  
  21.             <div>  
  22.                 <label>  
  23.                     <span>Website: (required)</span>  
  24.                     <input placeholder="Begin with http://" type="url" tabindex="4" required>  
  25.                 </label>  
  26.             </div>  
  27.             <div>  
  28.                 <label>  
  29.                     <span>Message: (required)</span>  
  30.                     <textarea placeholder="Include all the details you can" tabindex="5" required></textarea>  
  31.                 </label>  
  32.             </div>  
  33.             <div>  
  34.                 <button name="submit" type="submit" id="contact-submit">Send Email</button>  
  35.             </div>  
  36.         </form>  

 js

 

JavaScript Code
  1. /* 
  2. Creating an HTML5 enhanced responsive-ready contact form, with custom javascript feature detection 
  3. www.toddmotto.com 
  4. */  
  5. (function() {  
  6.   
  7.     // Create input element for testing  
  8.     var inputs = document.createElement('input');  
  9.       
  10.     // Create the supports object  
  11.     var supports = {};  
  12.       
  13.     supports.autofocus   = 'autofocus' in inputs;  
  14.     supports.required    = 'required' in inputs;  
  15.     supports.placeholder = 'placeholder' in inputs;  
  16.   
  17.     // Fallback for autofocus attribute  
  18.     if(!supports.autofocus) {  
  19.           
  20.     }  
  21.       
  22.     // Fallback for required attribute  
  23.     if(!supports.required) {  
  24.           
  25.     }  
  26.   
  27.     // Fallback for placeholder attribute  
  28.     if(!supports.placeholder) {  
  29.           
  30.     }  
  31.       
  32.     // Change text inside send button on submit  
  33.     var send = document.getElementById('contact-submit');  
  34.     if(send) {  
  35.         send.onclick = function () {  
  36.             this.innerHTML = '...Sending';  
  37.         }  
  38.     }  
  39.   
  40. })();  

 


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