可通过JavaScript实现密码一致性比对、正则校验复杂度、HTML5原生属性增强验证及自定义函数封装四种方法，确保密码安全合规。
如果您在HTML5表单中需要确保用户输入的密码符合安全要求或两次输入一致，则可以通过JavaScript进行实时比对或使用正则表达式校验密码复杂度。以下是实现该验证功能的具体步骤：
一、比对两次输入的密码是否一致
该方法通过监听第二个密码输入框的失焦事件，获取两个输入框的值并进行字符串比对，从而判断是否一致。适用于注册或修改密码场景，防止用户因误输导致无法登录。
1、为第一个密码输入框设置id为“password”，第二个密码输入框设置id为“confirmPassword”。
2、在页面底部或script标签内编写JavaScript代码，获取两个输入框元素。
立即学习“前端免费学习笔记（深入）”；
3、为confirmPassword绑定blur事件监听器。
4、在事件处理函数中，读取password.value和confirmPassword.value的值。
5、若两值不相等，则将confirmPassword的border样式设为2px solid red，并提示用户“两次输入不一致”。
6、若相等，则将border恢复为1px solid #ccc，并清除提示信息。
二、用正则表达式验证密码复杂度
该方法利用RegExp对象定义密码强度规则，例如要求至少8位、包含大小写字母、数字及特殊符号中的至少三类。通过test()方法执行匹配，返回布尔结果。
1、定义正则表达式变量，如const pwdRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.\/?]).{8,}$/;
2、获取密码输入框元素，监听其input事件以实现实时校验。
3、每次触发时，调用pwdRegex.test(inputValue)判断是否匹配。
4、若返回false，则在密码框下方显示提示文字：“密码需包含大写、小写、数字、特殊字符中的至少三类，且长度不少于8位”。
5、若返回true，则隐藏提示文字，并将密码框边框设为2px solid green。
三、结合HTML5原生属性与JS增强验证
该方法利用HTML5的required、pattern、title等属性完成基础约束，并通过JavaScript补充pattern未覆盖的逻辑（如禁止连续重复字符、禁止常见弱密码等），提升验证健壮性。
1、在password输入框中添加pattern属性，值为上述正则表达式字符串。
2、添加title属性，内容为“请按要求设置密码”，作为原生提示文本。
3、使用JavaScript监听submit事件，在表单提交前执行额外校验逻辑。
4、检查密码是否为“12345678”、“password”、“admin123”等预设弱密码列表中的项。
5、若命中弱密码库，则阻止表单提交，并将密码框背景设为#ffe6e6。
四、使用自定义验证函数封装校验逻辑
该方法将密码一致性比对与复杂度校验封装为独立函数，便于复用和维护。每个函数接收输入框元素作为参数，内部执行对应逻辑并返回验证状态。
1、定义函数checkPasswordMatch(input1, input2)，接收两个DOM元素。
2、定义函数checkPasswordStrength(value)，接收密码字符串，返回对象{valid: boolean, message: string}。
3、在页面初始化时，分别调用这两个函数绑定到对应事件上。
4、当checkPasswordStrength返回valid为false时，显示message字段内容，并将input2的父容器添加class="error-state"。
5、所有验证失败时，统一调用event.preventDefault()阻止默认提交行为。
