您的位置:首页> 实例代码> JS实例

JavaScript 密码强度提示效果

2019-10-25 19:59| 作者: admin| 查看: 1985| 评论: 1|来自: 钱柜手机网页版

分享一个非常简单的代码实例,它实现了简单的密码强度检测效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<title>钱柜手机网页版</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#password {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #c8c8c8;
  color: #333;
}
#password > p {
  font-size: 12px;
  color: #888;
}
.tips {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid #b9b8b8;
  margin-right: 10px;
}
</style>
<script>
function matchLevel(password) {
  if (password.length < 6) {
    return 0;
  }
  if (password.length >= 6 && password.length < 10) {
    return 1;
  }
  if (password.length >= 10 && password.length < 16) {
    return 2;
  }
  if (password.length >= 16) {
    return 3;
  }
}
window.onload = function() {
  tipColor = ['red', 'yellow', 'orange', 'green'];
  var tipEle = document.getElementsByClassName("tips");
  document.getElementsByTagName("input")[0].onkeyup = function() {
    var level = matchLevel(this.value);
    if (this.value.length) {
      for (var i = 0, eleLen = tipEle.length; i < eleLen; i++) {

        if (i <= level) {
          tipEle[i].style.backgroundColor = tipColor[i];
        } else {
          tipEle[i].style.backgroundColor = '';
        }
      }
    } else {
      for (var i = 0, eleLen = tipEle.length; i < eleLen; i++) {
        tipEle[i].style.backgroundColor = '';
      }
    }
  }
}
</script>
</head>
<body>
  <div id="password">
    密码:<input type="password" />
    <p>
      密码强度:
      <span class="tips" level="0"></span>
      <span class="tips" level="1"></span>
      <span class="tips" level="2"></span>
      <span class="tips" level="3"></span>
    </p>
  </div>
</body>
</html>
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 hgh123 2019-11-12 12:51
var level = matchLevel(this.value);
你好,这段代码代码的作用是什么,不太理解?

查看全部评论(1)

返回顶部