HTML5 input标签正则验证报错：正则表达式无效问题求助

问题出在HTML5 pattern 属性的默认行为上：它会自动为你提供的正则表达式添加首尾锚点（^ 和 $），强制匹配整个输入字符串。你手动在正则里写了^和$，最终实际生效的正则会变成^^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$$，这会导致匹配失败。

修正后的代码 #

把正则里的^和$去掉即可：

<input name="password" pattern="(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}"/>

补充说明 #

• HTML5的pattern验证逻辑是必须完全匹配输入内容，所以不需要手动添加首尾锚点，浏览器会自动处理。
• 测试时可以通过提交表单，或者调用输入框的checkValidity()方法来触发验证，确保规则生效。

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