通过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; 
}​