regex 我的正则表达式验证html输入中的模式有什么问题？

06odsfpq 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(99)

我在我的网站上有一个输入框，我想验证它是4到30个字符之间的字母数字或任何字符。_ -（点、下划线、连字符）。
例如，这些是有效的：

无效：

在我的HTML中，我有这样一行：

<input id="handletext" type="text" spellcheck="false" pattern="^[\w-\.]{4,30}$" maxlength="30" />

当我在最新的Chrome中加载页面时，调试器中出现错误：
模式属性值^[\w-.]{4，30}$不是有效的正则表达式：未捕获的语法错误：正则表达式无效：/^[\w-.]{4，30}$/：无效的字符类。
知道我的模式有什么问题吗

2条答案

现在，转义字符类中的连字符，甚至在字符类末尾：

pattern="[\w.\-]{4,30}"

您必须转义连字符或将其放在字符类的开始/结束处，并且还需要从.中删除转义反斜杠。由于.不是字符类中的特殊字符，因此不应在使用u修饰符编译的模式中对其进行转义（在大多数浏览器中，它都使用该标志编译，包括Chrome）。
使用

pattern="[\w.-]{4,30}"

请注意，您不需要^和$，锚点由HTML5引擎自动添加。
在Chorme中，模式将被编译为/^(?:[\w.-]{4,30})$/u regex，并将匹配由4到30个ASCII字母、数字、_、.或-字符组成的字符串。

pattern="[\w\-\.]{4,30}"适合我，所以你也可以试试。
这里的要点是你必须转义连字符。