使用 HTML5 进行电子邮件验证答案

【问题标题】：Email Validation using HTML5使用 HTML5 进行电子邮件验证
【发布时间】：2023-03-21 12:19:01
【问题描述】：

我需要创建一个电子邮件验证代码，它具有实时验证并在末尾有一个成功消息框。

就本任务而言，电子邮件地址必须：

• 以一串字母数字字符开头

• 后跟 @ 符号

• 另一个字母数字字符串

• 后跟一个“ . ”

• 然后是一串字母数字字符。

例如 a@b.c 和 ab23@f45.d3 都是有效的

但@bc.d 和 123.c@cvb 无效

如果这些变量中的任何一个不满足，实时验证必须这么说！

这需要在 HTML5 中并且需要快速帮助！！！！

【问题讨论】：

<input type="email"/>? BTW 123.c@cvb 根据 RFC 1123 有效，因为 cvb 可能是顶级域
@Rhumborl 这不可靠，但是那里有很多验证库...
请注意，type="email" 会将123.c@cvb 视为有效...您必须使用regex 即JavaScript 来检查电子邮件...。

标签： html validation email

【解决方案1】：

有点难以知道你的实际问题是什么，但正如 @matías-fidemraizer 在 cmets 中所说，有很多 JavaScript 库可以进行这种验证，而且相当快速的网络搜索应该会给你一些好处起点。

如果您想要一些更直接的建议，并且您提到显示成功消息等。也许可以查看例如框架Bootstrap 和一些可用的电子邮件验证插件。快速搜索得到这两个：Bootstrap Validator 和 BootstrapValidator。

【讨论】：

是的，我知道正则表达式，但我需要完整的代码、html% 和 JavaScipt 有人可以帮忙吗？

【解决方案2】：

您可以使用 javascript 正则表达式来检查电子邮件地址：

var mail = 'john.doe@example.com'
var re = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if (!re.test(mail)) {
    window.alert('Invalid email address');
}

更多信息在这里：http://www.w3schools.com/jsref/jsref_regexp_test.asp

【讨论】：