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})?"

请参阅下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<强>详情

^...$ - 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替换可能会被删除）和{ {1}}重复两次。

此处可能还有其他增强功能，但您也可以使用

org

HTML5电子邮件验证属性。

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

1 个答案: