Question

拥有此HTML（jsfiddle）：

<form>
    <input name="email" type="email" placeholder="Email" required />
    <input type="submit" value="Submit">
</form>

为什么hello@world未被标记为无效的电子邮件地址？

尝试使用pattern="/^\w+(?:\.\w+)*@\w+(?:\.\w+)+$/"，但也没有多少运气。

Answer 1

From the HTML5 specifications :

有效的电子邮件地址是与以下ABNF的电子邮件生成相匹配的字符串，其字符集为Unicode。此ABNF实现RFC 1123中描述的扩展。[ABNF] [RFC5322] [RFC1034] [RFC1123]

电子邮件= 1 *（atext /＆＃34;。＆＃34;）＆＃34; @＆＃34;标签*（＆＃34;。＆＃34;标签）

label = let-dig [[ldh-str] let-dig]; RFC 1034第3节限制为> 63个字符的长度

atext =＆lt;如RFC 5322第3.2.3节>
中所定义
let-dig =＆lt;如RFC 1034第3.5节>
中所定义
ldh-str =＆lt;如RFC 1034第3.5节>
中所定义

因此，*("." label)被视为有效，因为.不会在@之后强制{{1}}

Answer 2

请尝试使用此模式：

\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,6}\b

您可以添加一个解析和验证电子邮件字符串的函数，如下所示：

来自this帖子。

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}

这是live example

HTML解决方案 您可以使用HTML5中的pattern属性来验证电子邮件：

<form>
        <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required /> 
        <br />
        <input type="submit" value="Submit Now!">
</form>

以下是来源：link

HTML5错误的电子邮件类型输入验证+必需

2 个答案: