HTML输入Pattern验证不匹配，但JavaScript测试匹配问题排查

核心问题是HTML的pattern属性写法错误：

• HTML的pattern属性接受的是正则表达式的纯文本形式，不需要用斜杠/包裹。你当前写法里的/^...$/，其中的斜杠会被当作正则匹配的一部分，要求密码字符串必须以/开头、以/结尾，这显然不符合正常密码格式，所以HTML验证提示不匹配。
• 而JavaScript中使用的是正则字面量/^...$/，斜杠是正则的语法分隔符，不会被当作匹配内容，因此测试显示匹配正常。

修正后的HTML代码 #

<input id="password" type="password" placeholder="Password Input" pattern="^(?!.*(.)\1{1})(?=(.*[\d]){2,})(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*[\D\W\S]){2,})(?:[\d\w\S]){8,64}$">

额外说明：HTML的pattern属性会自动为正则添加^和$锚点，所以也可以省略这两个符号，简化为：

<input id="password" type="password" placeholder="Password Input" pattern="(?!.*(.)\1{1})(?=(.*[\d]){2,})(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*[\D\W\S]){2,})(?:[\d\w\S]){8,64}">

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