JS基于正则表达式实现的密码强度验证功能示例

时间：2021-05-26

本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.jb51.net </title></head><style type="text/css"> body { background: #ccc; } label { width: 40px; display: inline-block; } span { color: red; } .container { margin: 100px auto; width: 400px; padding: 50px; line-height: 40px; border: 1px solid #999; background: #efefef; } span { margin-left: 30px; font-size: 12px; } .wrong { color: red } .right { color: green; } .strengthLv0 { height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; } .strengthLv1 { background: red; height: 6px; width: 40px; border: 1px solid #ccc; padding: 2px; } .strengthLv2 { background: orange; height: 6px; width: 80px; border: 1px solid #ccc; padding: 2px; } .strengthLv3 { background: green; height: 6px; width: 120px; border: 1px solid #ccc; padding: 2px; }</style><body><div class="container"> <label>密码</label> <input type="text" id="inp1" maxlength="16"> <!--<input type="password" id="inp1" maxlength="16"/>--> <div class="pass-wrap"> <em>密码强度：</em> <em id="strength"></em> <div id="strengthLevel" class="strengthLv0"></div> </div></div><script> var regEx = /^[1-9]\d{4,9}$/; //匹配qq号 //找人 var inp1 = document.getElementById("inp1"); var strength = document.getElementById("strength"); var strengthLevel = document.getElementById("strengthLevel"); var arr = ["", "低", "中", "高"]; inp1.onkeyup = function () { var level = 0; if (/[1-9]/.test(this.value)) { level++; } if (/[a-z]/.test(this.value)) { level++; } if (/[^a-z1-9]/.test(this.value)) { level++ } if (this.value.length < 6) { level = 0; } strength.innerHTML = arr[level]; strengthLevel.className = "strengthLv" + level; }; </script></body></html>

PS：这里再为大家提供几款相关在线工具供大家参考使用：

密码安全性在线检测：
http://tools.jb51.net/password/my_password_safe

在线随机数字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu

高强度密码生成器：
http://tools.jb51.net/password/CreateStrongPassword

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章