通过 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>

---

或

---

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?

在 cmets 中有一些关于不应忽略的边缘情况的有价值的讨论。

在您询问之前，您是否尝试过 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;
 }​