电子邮件的 HTML5 表单验证 [重复]答案

【问题标题】：HTML5 form validation for email [duplicate]电子邮件的 HTML5 表单验证 [重复]
【发布时间】：2016-01-17 04:32:35
【问题描述】：

我被这个我之前没有注意到的问题所困扰。

<label> Email Address </label>
<input type="email" id="emailAddress" required placeholder='Email Address' />
<button type="submit" class="button primary small">Submit</button>

在我的 JS 文件中，我正在使用 checkValidity() 检查其验证

checkValidEmail: function(event){
  var emailAddress = $('#emailAddress');
  if(emailAddress[0].checkValidity()){
    console.log('Valid');
  } else{
    console.log('Not Valid');
  }
}


"keyup #emailAddress": "checkValidEmail" // KeyUp works as expected

Output:
  'a@b' // Valid

我不理解这种行为。据我所知，@.com 是输入电子邮件的正则表达式。

请注意：我在多个带有表单的网站上尝试过这个，它显示了相同的输入。在上述情况下，我在 chrome 浏览器上执行此操作。

感谢您抽出宝贵时间回复！

【问题讨论】：

并非所有浏览器都支持电子邮件类型。 @.com 不是正则表达式。如果是这样，很多电子邮件地址都会失败。
是的，这是一个类似的问题。但是其中的答案使 Maksym 在下面提供的表达失败了。这是一个有效的电子邮件地址。如果你们仍然想将其标记为重复。很乐意这样做！

标签： javascript regex html validation

【解决方案1】：

在 HTML5 中，您可以像这样验证电子邮件

<form>
    <input type="email" placeholder="Enter your email">
    <input type="submit" value="Submit">
</form>

【讨论】：

与 OP 相比有什么变化？

【解决方案2】：

如果您想使用正则表达式验证，请继续阅读

http://www.regular-expressions.info/email.html

请注意，以下是 100% 有效且有效的电子邮件地址 :-) 经常使用它来测试错误实施的电子邮件验证

xn--80a1acny@xn--80auew.xn--j1amh

另一个选项是检查电子邮件地址域名是否有效。这样做你可以查询 DNS 服务器的 MX 记录（这一点指向负责接收传入邮件的 SMTP 服务器）。您将需要服务器端代码来执行此操作。

【讨论】：