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

2020-11-27 来源：好土汽车网

导读 JS基于正则表达式实现的密码强度验证功能示例:本文实例讲述了JS基于正则表达式实现的密码强度验证功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8>

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

先来看看运行效果：

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com 脚本之家</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;
 };
 /* inp1.onkeyup = function () {
 var level = 0;
 if (/[1-9]/.test(this.value)) {
 level++;
 }
 if (/[a-z]/.test(this.value)) {
 level++
 }
 if (/[^a-z0-9]/.test(this.value)) {
 level++
 }
 if (inp1.value.length < 6) {
 level = 0;
 }
 strengthLevel.className = "strengthLv"+level;
 strength.innerHTML = arr[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程序设计有所帮助。

显示全文

全部栏目

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