Jquery中的电子邮件输入验证答案

【问题标题】：email input validation in JqueryJquery中的电子邮件输入验证
【发布时间】：2015-07-02 03:15:55
【问题描述】：

我需要验证电子邮件输入的值。我有这个代码，但它不起作用。你能帮帮我吗？

HTML

<input type="text" name="mail" class="mail" /> 
<button class="validate">VALIDATE</button>

JQUERY

$(document).ready(function(){
    var setMail = $(".mail").val();
    var mailVal = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; 

    $(".validate").click(function(){
        if (mailVal == setMail) {
            alert("GOOD!");
            }
            else{ 
            alert("WRONG!");
            }
   });
});

JSFiddle: DEMO

【问题讨论】：

编辑以下内容： if (mailVal.test(setMail)) { to if (mailVal.test($(".mail").val())) { 因为到目前为止 setMail 只是获取页面加载，这将是空的，所以你没有验证任何东西。
您应该以更有效的方式重组您的代码并将输入字段绑定到 .focusout() 这样您就可以在不需要点击按钮的情况下进行验证。

标签： jquery html css forms validation

【解决方案1】：

mailVal 不会等于 setMail。您想检查匹配：mailVal.test($(".mail").val()) 而不是 == 测试。

【讨论】：

我还建议将输入类型更改为“电子邮件”，并将正则表达式更改为以下内容以遵循 W3C 电子邮件验证标准：/^[a-zA-Z0-9.! #$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)* $/

【解决方案2】：

您可以使用 jQuery 验证库。它以一种简单的实施方式为您进行了许多验证。像这样-

$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

文档来源链接- jQuery Validation

【讨论】：