提交时的正则表达式电子邮件验证答案

【问题标题】：Regex email validation on submit提交时的正则表达式电子邮件验证
【发布时间】：2016-12-19 21:07:03
【问题描述】：

我想在提交时通过正则表达式对电子邮件进行非常基本的 jQuery 验证。我的 HTML：

<form action="POST" id="form">
<input type="email" id="customer_email" placeholder="email here" />
<input type="submit" />
</form>

JS：

$('#form').submit(function() {
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

var emailinput = $('#customer_email').value();

if (email_reg.test(emailinput) == false) {
    window.alert('no good');
}
});

据我了解，要使其正常工作，我需要通过电子邮件输入（我在第 4 行执行此操作）获取输入的值并在其上运行正则表达式。

单击提交时，标准输入错误出现在表单上，而不是窗口警报。随意查看 Codepen 在这里概述： http://codepen.io/anon/pen/oYmJLW?editors=1010

【问题讨论】：

我使用这封电子邮件测试了您的正则表达式：“2039i#@gmail.com”，它工作得很好。它提醒您的警告信息（“不好”）。你试过什么电子邮件？也许必须根据您的情况更改正则表达式。
我在我的个人网站上使用正则表达式，效果很好。问题是我使用的是type="email"，我猜它会覆盖 JS 验证。

标签： javascript jquery html

【解决方案1】：

您需要添加event.preventDefault() 以防止实际提交表单，并在输入上使用.val() 而不是.value()。

$('#form').submit(function(event) {
    event.preventDefault();
    var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var emailinput = $('#customer_email').val();

    if (email_reg.test(emailinput) == false) {
        window.alert('no good');
    }
});

通过将您的输入声明为type="email"，您的浏览器将进行有效性检查（此时您不需要自己进行），如果您想规避使用type="text"。

【讨论】：

哦，我明白了。因此，如果您使用type="email"，浏览器会进行有效性检查并覆盖 JS？我不知道。 e.preventDefault();不会允许这种情况发生吗？
@kawnah e.preventDefault() 只是阻止提交。老实说，我不知道为什么 Javascript 会被完全跳过以及为什么会这样交互，我猜是浏览器怪癖