js判断密码强度（使用正则表达式）

最新推荐文章于 2022-07-21 11:28:23 发布

好大一个绿菠萝

最新推荐文章于 2022-07-21 11:28:23 发布

阅读量1.9k

点赞数 2

分类专栏：前端 javascript实例文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46249441/article/details/121943702

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

javascript实例

14 篇文章 0 订阅

订阅专栏

完整代码如下：

html:

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> 判断密码强度 </title>
    <link rel="stylesheet" href="style.css">
  </head>
<body>
  <div class="container">
    <div class="input-box">
      <i class="show_hide iconfont icon-yanjing_bi"></i>
      <input type="password" placeholder="请输入密码">
    </div>
    <div class="indicator">
      <div class="icon-text">
        <i class="error_icon"></i>
        <h6 class="text"></h6>
      </div>
    </div>
  </div>
  
  <script src="script.js"></script>
  
</body>
</html>

css:

@import url('//at.alicdn.com/t/font_2532986_wz8cwu1rlq.css');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06a880;
}
.container{
  position: relative;
  max-width: 460px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 30px;
  margin: 0 20px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.container .input-box{
  position: relative;
}
.input-box .iconfont{
  font-size: 30px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #A6A6A6;
  padding: 5px;
  cursor: pointer;
}
.input-box input{
  height: 60px;
  width: 100%;
  border: 2px solid #d3d3d3;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  outline: none;
  padding: 0 50px 0 16px;
}

.container .indicator{
  display: none;
}
.container .indicator.active{
  display: block;
  margin-top: 14px;
}
.indicator .icon-text{
  display: flex;
  align-items: center;
}
.icon-text .error_icon{
  margin-right: 8px;
}
.icon-text .text{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

js:

const input = document.querySelector("input"),
      showHide = document.querySelector(".show_hide"),
      indicator = document.querySelector(".indicator"),
      iconText = document.querySelector(".icon-text"),
      text = document.querySelector(".text");

// 隐藏或显示密码

showHide.addEventListener("click", () => {
  if (input.type === "password") {
    input.type = "text";
    showHide.classList.replace("icon-yanjing_bi", "icon-yanjing-shi");
  } else {
    input.type = "password";
    showHide.classList.replace("icon-yanjing-shi", "icon-yanjing_bi");
  }
});


// 正则判断密码强度

let alphabet = /[a-zA-Z]/, //大小写字母
    numbers = /[0-9]/, //数字0-9
    scharacters = /[!,@,#,$,%,^,&,*,?,_,(,),-,+,=,~]/; //特殊符号

input.addEventListener("keyup", () => {
  indicator.classList.add("active");

  let val = input.value;
  if (val.match(alphabet) || val.match(numbers) || val.match(scharacters)) {
    text.textContent = "密码强度较低";
    input.style.borderColor = "#FF6333";
    showHide.style.color = "#FF6333";
    iconText.style.color = "#FF6333";
  }
  if (val.match(alphabet) && val.match(numbers) && val.length >= 6) {
    text.textContent = "密码强度中等";
    input.style.borderColor = "#cc8500";
    showHide.style.color = "#cc8500";
    iconText.style.color = "#cc8500";
  }
  if (val.match(alphabet) && val.match(numbers) && val.match(scharacters) && val.length >= 8) {
    text.textContent = "密码强度较高";
    input.style.borderColor = "#22C32A";
    showHide.style.color = "#22C32A";
    iconText.style.color = "#22C32A";
  }

  if (val == "") {
    indicator.classList.remove("active");
    input.style.borderColor = "#A6A6A6";
    showHide.style.color = "#A6A6A6";
    iconText.style.color = "#A6A6A6";
  }
});

更多css小动画，js小案例见我的主页：

我的主页

好大一个绿菠萝

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
js判断密码强度（使用正则表达式）

完整代码如下：html:<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title> 判断密码强度 </title> <link rel="stylesheet" href="style.css"> </head><body> <div cl...
复制链接

扫一扫

专栏目录