可通过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伪类:focus-within与data属性标记状态
该方法结合HTML5的required属性与自定义data属性，在用户离开确认密码框时记录比对结果，并通过CSS控制提示区域显隐。
1、为两个密码input均添加required属性。
2、为确认密码input添加data-validate=”password-match”属性。
3、在blur事件中读取password.value与当前input.value。
4、若不一致，在确认密码input后插入一个span元素，内容为：密码未匹配。
5、若一致，移除该span元素或将其display设为none。
四、使用HTML5 Constraint Validation API的checkValidity()方法
该方法利用浏览器原生验证接口，在提交前主动调用checkValidity()，并结合setCustomValidity()注入语义化错误信息。
1、为确认密码input设置id=”pwd-confirm”，并添加required属性。
2、在表单submit事件处理函数中，先调用document.getElementById(“pwd-confirm”).checkValidity()。
3、若返回false，说明存在基础验证失败（如为空），跳过密码比对。
4、若返回true，再执行密码字符串比对逻辑。
5、比对失败时，调用document.getElementById(“pwd-confirm”).setCustomValidity(“两次密码输入不一致“)。
6、随后再次调用checkValidity()触发错误提示框显示。
以上就是html5怎么确认密码_html5用两组input设相同name验证两次密码一致【验证】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606557.html
微信扫一扫 
支付宝扫一扫 
