HTML 的 pattern 属性接受纯正则表达式字符串（无 /.../ 包裹），而 JavaScript 的 RegExp 构造函数或字面量才需要斜杠分隔符；混淆二者会导致 HTML 原生校验始终失败，即使 JS test() 返回 true。
html `` 的 `pattern` 属性接受纯正则表达式字符串（无 `/.../` 包裹），而 javascript 的 `regexp` 构造函数或字面量才需要斜杠分隔符；混淆二者会导致 html 原生校验始终失败，即使 js `test()` 返回 `true`。
在 HTML 表单验证中，pattern 属性的值不是正则字面量，而是不带分隔符的正则表达式字符串。当你写成：
<input pattern="/^...$/">
浏览器会将开头的 / 和结尾的 / 视为普通字符（即字面量斜杠），而非正则语法的一部分。因此实际匹配的是以 / 开头、以 / 结尾的字符串——显然你的密码 "FAGX@s#A2dred01sd" 并不满足该条件，导致 HTML 校验失败。
而 JavaScript 中：
const patternPass = new RegExp(/^(?!.*(.){1})...$/);
// 或等价写法：
const patternPass = new RegExp("^(?!.*(.)\1{1})(?=(.*[\d]){2,})...");/.../ 是合法的正则字面量语法，JS 引擎自动解析为正则对象；但 pattern 属性不支持此语法，它只接受 ECMAScript 正则语法的字符串形式，且不能包含首尾斜杠，也不能省略转义（尤其在 HTML 属性中需注意双重转义）。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法（移除斜杠，并确保特殊字符正确转义）：
<input
id="password"
type="password"
placeholder="Password Input"
pattern="^(?!.*(.){1})(?=(.*[d]){2,})(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*[^ws]){2,}).{8,64}"
>⚠️ 关键修正说明：
- 删除 pattern 值两端的 /；
- [DWS] 逻辑冗余且易出错（D 已含非数字，W 含非单词字符，S 含非空白——三者并集几乎覆盖全部 Unicode），推荐改用 [^a-zA-Z0-9s] 或更清晰的 [^ws] 表示“至少两个特殊符号”；
- .{8,64} 替代 (?:[dwS]){8,64}：更简洁且语义明确（任意字符，含 Unicode）；若需限制为 ASCII，请用 [sS] 或显式字符集；
- 注意：HTML 属性中反斜杠 需写为 \（如在 JSX 或动态生成时），但在静态 HTML 中单 即可被正确解析为转义符（现代浏览器均支持）。
? 验证建议：
- 使用 input.checkValidity() 检查原生校验结果；
- 在控制台运行 document.getElementById('password').validity.valid 实时观察；
- 避免依赖 regexr.com 的 /.../ 模式直接复制到 pattern —— 务必剥离分隔符并测试空字符串、边界值（如 8 位、64 位、重复字符等）。
总结：HTML pattern 与 JS 正则语法同源但输入格式不同——前者是裸字符串，后者支持字面量。牢记这一差异，可避免 90% 的模式匹配不一致问题。
