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

Question

我的网站上有一个输入框，我想验证它是否为4到30个字母数字或任何字符。 _-（点，下划线，连字符）。

例如这些是有效的：

• 你好-
• goodbye23_.sd

无效：

• 嘘
• nospecials％
• 这有一个空格

在我的html中，我有这行：

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

在最新的Chrome浏览器中加载页面时，我在调试器中遇到错误：

  

模式属性值^ [\ w-。] {4,30} $不是有效的常规   表达式：未捕获的SyntaxError：无效的正则表达式：   /^[\w-.]{4,30}$/：无效的字符类。

任何想法我的模式有什么问题吗？

Answer 1

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

使用

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

请注意，您不需要^和$，锚点是added automatically by the HTML5 engine。

在Chorme中，该模式将被编译为/^(?:[\w.-]{4,30})$/u正则表达式，并将匹配由四到三十个ASCII字母，数字，_，.或{{1}组成的字符串}字符。

Answer 2

pattern="[\w\-\.]{4,30}"对我有用，因此您也可以尝试。
这里的意思是你必须避开连字符。