HTML表单中MAC地址正则验证pattern属性失效问题求助

你的MAC地址验证失效是因为正则表达式里的字符集写法错误：[:-]中的-在字符集中间会被解析为字符范围，而:的ASCII码（58）比-（45）大，这个范围是空的，导致正则无法匹配预期的:或-分隔符，最终整个验证逻辑失效，任何内容都能提交。

修正方案 #

把正则表达式里的字符集调整为[-:]（将-放在字符集开头，避免被当作范围），或者[:\-]（转义-），两种写法都能正确匹配:或-分隔符。

修正后的input代码：

<input type="text" id="p1_mac" name="p1_mac" pattern="^([0-9A-Fa-f]{2}[-:]){5}[0-9A-Fa-f]{2}$" maxlength="17" required title="请输入有效的MAC地址，格式如AA:BB:CC:DD:EE:FF或AA-BB-CC-DD-EE-FF"/>

额外提示 #

• 加上title属性后，验证失败时浏览器会显示提示文字，提升用户体验；
• 确保表单没有添加novalidate属性（该属性会禁用原生验证）；
• 主流现代浏览器都支持pattern属性的原生验证，无需额外JS。

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