javascript - 电子邮件输入中 HTML5 输入模式中的正则表达式无效

Question

我需要在 HTML 输入(电子邮件类型)中使用这个正则表达式，我曾经在这里创建一个正则表达式来匹配我们想要验证的内容 http://regexr.com/3gib9

正则表达式

/^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$/gm

图案

^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$

带有图案的元素

<input type="email" pattern="^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$" name="email" class="form-control" placeholder="email address" value="<%= session("user_email_addr") %>" required="required" title="Please input a valid email">

现在当我在表单中输入任何电子邮件时出现此错误(无效转义)

Pattern attribute value ^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$/: Invalid escape

我怎样才能完成这项工作？

Answer 1

您需要删除字符类中不必要的转义反斜杠和错误的 |，以及多余的结构:

pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?"

请看下面的演示:

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?" title="Wrong email!"/>
 <input type="Submit"/> 
</form>

详情

• ^...$ - anchor 在 HTML5 模式中不是必需的，因为默认情况下正则表达式是锚定的(^(?: 和 )$ 在翻译成正则表达式时自动添加到模式中)
• [A-Z|a-z|0-9] - 字符类中的 | 被视为文字 | 符号，而不是交替运算符
• (\.|_){0,1} - 当可以使用字符类时，单个字符交替毫无意义，[._ ] 是一个更自然的结构。此外，{0,1} 更自然地写成 ? 量词。
• \@ - 罪魁祸首! - 这个字符不必转义，而且 不能在 ES6 正则表达式中转义具有 u 修饰符的模式(这是 HTML5 模式转换成的正则表达式，例如 pattern="[A-Z]" 将被转换成 /^(? :[A-Z])$/u 正则表达式)
• (com|net|org|co|org) 可以简化为 (com?|net|org):com?匹配 com 和 co(因此，可以删除 co 替代项)并且 org 重复两次。

这里可能还有其他增强功能，但您也可以只使用

type="email"

HTML5 电子邮件验证属性。