添加電子郵件和數字驗證到jquery表格

Question

我有一個非常簡單的問卷形式，只需要幾個字段是強制性的。如何將電子郵件驗證添加到電子郵件字段以確認其實際的電子郵件。以及如何確認zip_code只包含數字？如果不是使用警報，我可以使用將在窗體上顯示的div標籤，並告訴他們需要填寫什麼內容，如果有人知道如何簡單地添加該標籤，那麼這將非常棒。我使用Twitter的引導，很想利用自己的警告div的

$(document).ready(function(){ 
    $('#contact_form').submit(function(){ 
     if ($('#first_name').val() == '') { 
      alert('You must enter your first name!');   
      return false; 
     } 
     if ($('#last_name').val() == '') { 
      alert('You must enter your last name!'); 
      return false; 
     } 
     if ($('#email').val() == '') { 
      alert('You must enter an email!'); 
      return false; 
     } 
     if ($('#zip_code').val() == '') { 
      alert('You must enter your zip code!'); 
      return false; 
     } 
     if ($('#message').val() == '') { 
      alert('You need to tell us something! Please enter your message!'); 
      return false; 
     } 
    }); 
}); 

Answer 1

你可以做一些東西柯本

的HTML

<div class="error"></div> 
<form id="contact_form" method="post" action=""> 
    <input type="text" name="first_name" id="first_name" placeholder="First Name"/> 
    <br/> 
    <input type="text" name="last_name" id="last_name" placeholder="Last Name"/> 
    <br/> 
    <input type="text" name="email" id="email" placeholder="Email"/> 
    <br/> 
    <input type="text" name="zip_code" id="zip_code" placeholder="Zip Code"/> 
    <br/> 
    <textarea name="message" id="message" placeholder="Message"></textarea> 
    <br/> 
    <input type="submit" value="submit" /> 
</form> 

jQuery的

$(document).ready(function(){ 
    $('#contact_form').submit(function(){ 
     error = ''; 

     if ($('#first_name').val() == '') { 
      error += 'You must enter your first name!<br/>'; 
     } 

     if ($('#last_name').val() == '') { 
      error += 'You must enter your last name!<br/>'; 
     } 

     if ($('#email').val() == '') { 
      error += 'You must enter your email<br/>'; 
     } 
     else 
     { 
      var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 

      if(!pattern.test($('#email').val())) 
      { 
       error += "Invalid email address<br/>"; 
      } 
     } 

     if ($('#zip_code').val() == '') { 
      error += 'You must enter your zip code<br/>'; 
     } 
     else 
     { 
      if (!isNumber($('#zip_code').val())) 
      { 
       error += 'Invalid zip code<br/>'; 
      } 
     } 
     if ($('#message').val() == '') { 
      error += 'You need to tell us something! Please enter your message!'; 
     } 

     if(error != '') 
     { 
      $('.error').html(error); 
      $('.error').fadeIn(); 
      return false; 
     } 
     else 
     { 
      return true; 
     } 
    }); 
}); 

function isNumber(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
} 

例 Fiddle

Answer 2

退房這個答案來驗證你的電子郵件領域Email validation using jQuery

退房這個答案郵編驗證ZIP Code (US Postal Code) validation

輸出到引導警告消息把類似下面的東西，而不是你的警報...

$(body).prepend('<div class="alert alert-block alert-error fade in"><a class="close" data-dismiss="alert" href="#">&times;</a>You need to tell us something! Please enter your message!</div>');