HTML输入框正则匹配失效：如何设置仅允许字母数字等指定字符

嘿，我来帮你解决这个正则的问题！你现在用的pattern="[a-zA-Z0-9_-.]"没法正常工作，主要是两个小细节没处理对，咱们一步步捋清楚：

原写法的问题在哪？ #

1. 短横线的位置踩坑了：在正则的字符集[]里，短横线如果夹在两个字符中间，会被当成「字符范围」来解析——比如你写的_-.，其实是匹配ASCII码从_（95）到.（46）之间的所有字符，这完全不是你想要的那些符号！
2. 没限定匹配范围和数量：这个pattern只能匹配单个符合要求的字符，而你需要的是整个输入框的内容都符合规则，所以得加上量词（比如+表示至少一个字符），还要确保从开头到结尾都符合（HTML的pattern其实默认会加^和$，但显式写上更严谨）。

正确的写法来了 #

根据你的需求，这几种写法都可以：

方法1：把短横线移到字符集的开头或结尾 #

把短横线放在最前或最后，它就会被当成普通字符识别，不会触发范围匹配：

<input type="text" pattern="[a-zA-Z0-9_.-]+" title="仅允许输入字母数字、下划线、短横线和点号">

如果想更严谨，显式加上开头和结尾的限定符也没问题：

<input type="text" pattern="^[a-zA-Z0-9_.-]+$" title="仅允许输入字母数字、下划线、短横线和点号">

方法2：转义短横线 #

要是不想调整位置，用反斜杠把短横线转义成普通字符也行：

<input type="text" pattern="[a-zA-Z0-9_\-.]+" title="仅允许输入字母数字、下划线、短横线和点号">

验证一下你的示例 #

你提到的有效输入：aA12_-., _Afsdf., _end.1这些都能正常匹配通过。不过注意你写的Aasdj 123123里有空格，这个是不符合规则的哦，如果需要允许空格的话，得把空格加到字符集里（比如[a-zA-Z0-9_.- ]+）。

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