Vue3中HTML Input的pattern属性未按预期工作问题咨询

你遇到的问题核心是正则表达式字符组中短横线-的特殊作用：

在正则的方括号[]里，短横线如果夹在两个字符中间，会被解析成范围运算符，用来表示一段连续的ASCII字符区间。你写的[A-Za-z0-9\s-_]+中，\s-_其实是匹配「从空白字符（ASCII 32）到下划线（ASCII 95）」之间的所有字符——这个范围包含了字母、数字、空格，还包括!@#$%^&*()等大量符号，完全超出了你原本只想允许短横线、下划线的需求，所以任何落在这个大范围里的输入都能通过验证，导致你的规则形同虚设。

而之前的[A-Za-z0-9\s]+没问题，是因为里面没有短横线，所有字符都是字面量或预定义字符类，规则明确。

修正方法 #

有两种简单的写法可以解决这个问题：

• 把短横线移到字符组的开头或结尾，让它被识别为字面量：

  pattern="[A-Za-z0-9\s_-]+"
  

  或者

  pattern="[-A-Za-z0-9\s_]+"
  

• 给短横线加上转义符\，明确标记为字面量：

  pattern="[A-Za-z0-9\s\-_]+"
  

内容的提问来源于stack exchange，提问作者Kasun Sampath Weligamage