电子邮件输入中的 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})?"

请参阅下面的演示：

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;
}

细节

• ^...$- 在 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?匹配comand co（因此，co可以删除替代项）并且org重复两次。

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

type="email"

HTML5 电子邮件验证属性。