合法正则作为HTML input的pattern属性时触发‘无法检查’错误

问题现象 #

无法检查<input pattern='/^[a-zA-Zà-úÀ-Ú0-9äöüÄÖÜß@\s+-_.,{}[]()#']+$/'，原因是该模式不是有效的正则表达式：正则表达式中存在无效的标识转义

用户尝试的两次代码：

First Try: <br />
<input type="text" pattern="/^[a-zA-Zà-úÀ-Ú0-9äöüÄÖÜß@\s\+\-\_\.\,\{\}\[\]\(\)\#\']+$">
<br />
Second Try: <br />
<input type="text" pattern="[a-zA-Zà-úÀ-Ú0-9äöüÄÖÜß@\s\+\-\_\.\,\{\}\[\]\(\)\#\']+">

错误原因 #

1. 多余的正则分隔符：HTML的pattern属性接收纯正则模式字符串，不需要像JavaScript正则那样加首尾的/分隔符，加了会被当作正则内容的一部分，直接导致语法错误。
2. 过度转义：在正则字符集[]内部，大部分特殊符号（如+、-、_、.、,、{}、()、#、'）不需要转义，强行转义会触发「无效标识转义」错误。
3. 范围符号风险：字符集里的-如果放在两个字符之间，会被解析为范围（比如代码里的\s+-_会被解析为匹配\s到_之间的所有ASCII字符），这大概率不是预期效果。

正确写法 #

<input type="text" pattern="^[a-zA-Zà-úÀ-Ú0-9äöüÄÖÜß@\s_.,{}()#'+-]+$">

关键调整说明 #

• 移除首尾的/分隔符，符合HTML pattern属性规则。
• 去掉字符集内所有不必要的转义，仅保留\s这个合法转义字符（表示空白字符）。
• 将-移到字符集末尾，避免被误解析为范围符号，确保它只匹配-本身。
• 保留^和$锚点，确保整个输入字符串完全符合规则（表单验证通常需要全匹配，若不需要可移除）。

内容的提问来源于stack exchange，提问作者ar099968