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

2019-11-19 15:20:56

字体：大中小

来源：转载

供稿：网友

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

先来看看运行效果：

具体代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.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.VeVB.COm/password/my_password_safe

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

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

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

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

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

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

上一篇：JS实现前端缓存的方法

下一篇：jQuery实现的简单动态添加、删除表格功能示例