通過Javascript驗證HTML表單

Question

我想讓觀衆不要輸入像「fssadf」這樣的單詞，並強制他們輸入一個有效的電子郵件，該電子郵件必須包含中間的「@」和「。」以防止垃圾郵件和注入。

我也希望表單顯示，說：「電子郵件字段更改爲正確的電子郵件」

我使用含有此js_function.js的錯誤消息：

function validEmail() 
{ 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var email_address = $("#email").val(); 
    if(reg.test(email_address) == false) 
     return false; 
    else 
     return true; 
} 

，但它不阻止觀看者向我發送「sfdasfd」而不是有效的電子郵件。

我能做些什麼來達到上述目的？

看看下面的文件： http://www.mediafire.com/?kx5bvttc0s2fbrs

感謝， 支

Answer 1

雖然我沒有看到你提供了什麼對我的計劃有任何錯誤，但你仍然可以使用

var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 

，而不是這個

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

我認爲，這將有助於。我提供了完整的Javascript代碼，適用於我。

function validEmail() 
    { 

     var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
     var email_address = $("#email").val(); 
     if(reg.test(email_address) == false) 
      return false; 
     else 
      return true; 
    } 

使用此

，或者你可以使用這個太其它方式

---

HTML

<form> 
    //Other Codes 
    <input type="text" name="email" id="email" onchange="validate(this.value)" /> 
    //Other Codes 
</form> 

和JavaScript

<script> 

function validate(email) 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
    if(reg.test(email) == false) 
     { 
      alert("This is a invalid Email Address!"); 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 
</script> 

---

OR

---

HTML

<form> 
    //Other Codes 
    <input type="text" name="email" id="email" onchange="validate()" /> 
    //Other Codes 
</form> 

和JavaScript

<script> 

function validate() 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
    var email = document.getElementById('email').value; 
    if(reg.test(email) == false) 
     { 
      alert("This is a invalid Email Address!"); 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 
</script> 

---

而最後的解決方案將是安靜更容易申請，我認爲。頁面，而不是彈出

上

錯誤消息

---

HTML

<form> 
     //Other Codes 
     <input type="text" name="email" id="email" onchange="validate()" /> 
     <span id="errormessage"></span> 
     //Other Codes 
    </form> 

和JavaScript

<script> 

function validate() 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
     var email = document.getElementById('email').value; 
    if(reg.test(email) == false) 
     { 
      document.getElementById('errormessage').innerHTML= 'fill your email'; 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
      document.getElementById('errormessage').innerHTML= ''; 
     return true; 
    } 
} 
</script> 

---

Answer 2

嘗試用這種

$(document).ready(function() { 

$('#btn-submit').click(function() { 

    $(".error").hide(); 
    var hasError = false; 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

    var emailaddressVal = $("#UserEmail").val(); 
    if(emailaddressVal == '') { 
     $("#UserEmail").after('<span class="error">Please enter your email address.</span>'); 
     hasError = true; 
    } 

    else if(!emailReg.test(emailaddressVal)) { 
     $("#UserEmail").after('<span class="error">Enter a valid email address.</span>'); 
     hasError = true; 
    } 

    if(hasError == true) { return false; } 

}); 

}）;

Answer 3

重複這個問題：

Validate email address in JavaScript?

有大約邊緣情況下，評論認爲，不應該被忽視了一些有價值的討論。

在問你之前，你有沒有嘗試Google？ IT是一個/非常/常見的問題。

Answer 4

如果你使用jQuery純HTML5解決方案之後....這裏有一個現場demo

HTML

<form id="form"> 
    Email <input name="field1" required="required" type="email" /> <br /> 
    <div id="error"></div> 
    <input required="required" name="submit" type="submit" /> 
</form>​ 

代碼

$(document).ready(function() { 
    var validCheckInput = function() { 
     if ($(this)[0].checkValidity()) { 
      $(this).removeClass("error"); 
      $("#error").empty();     
     } else { 
      $(this).addClass("error"); 
      $("#error").text("change the email field to the correct email"); 
     } 

     if ($("#form")[0].checkValidity()) { 
      $("#form input[type='submit']").removeAttr("disabled"); 
     } else { 
      $("#form input[type='submit']").attr("disabled", "disabled"); 
     } 
    };s 

    var binds = function(validCheck) { 
     $(this).change(validCheck); 
     $(this).focus(validCheck); 
     $(this).keyup(validCheck); 
     validCheck.call($(this)); 
    } 
    $("#form input").each(function() {binds.call(this, validCheckInput)}); 

});​ 

CSS

.error { 
    border: 2px solid red; 
}​