html5怎么确认密码_html5用两组input设相同name验证两次密码一致【验证】

可通过HTML5原生验证机制实现密码一致性校验，包括：一、用pattern配合JavaScript实时比对并调用setCustomValidity；二、用onsubmit拦截提交并严格比对；三、用blur事件结合data属性与CSS控制提示；四、用Constraint Validation API的checkValidity()与setCustomValidity()协同验证。

如果您在HTML5表单中使用两组input输入密码，需要确保两次输入的密码内容完全一致，可以通过原生HTML5的表单验证机制实现。以下是几种可行的验证方法：

一、使用type="password"配合pattern与JavaScript手动比对

该方法利用HTML5的pattern属性限制输入格式，并通过JavaScript监听输入事件实时比对两个密码字段的值，触发自定义验证提示。

1、为第一个密码输入框设置name="password"和id="password"，type="password"。

2、为第二个密码确认框设置name="confirm_password"和id="confirm_password"，type="password"。

立即学习“前端免费学习笔记（深入）”；

3、在页面底部添加script标签，获取两个元素节点，监听confirm_password的input事件。

4、每次输入时，比较password.value与confirm_password.value是否相等。

5、若不相等，调用confirm_password.setCustomValidity("两次输入的密码不一致，请重新输入")。

6、若相等，调用confirm_password.setCustomValidity("")清除错误状态。

二、使用HTML5内置的formnovalidate与submit事件拦截

该方法禁用默认提交验证，改由JavaScript在表单提交前统一校验密码一致性，避免绕过客户端验证。

1、为form标签添加onsubmit="return validateForm()"属性。

2、在validateForm函数中，获取password和confirm_password两个input元素的value。

3、使用严格相等运算符（===）判断二者是否完全相同。

4、若不一致，阻止表单提交并显示提示信息：确认密码与新密码不匹配。

5、若一致，返回true允许提交。

标签： css javascript word java html html5 浏览器 ai 表单提交 red