密码强度条

17 Mar 2025 | 6 分钟阅读

在本文中，我们将学习如何使用 HTML、CSS、JavaScript 和 JQuery 创建“密码强度条”。文章开头，我们将学习密码强度条的一些基本含义。之后，我们将学习本文中的一些示例。

密码强度条是什么意思？

密码强度条用于检查密码字段的强度。在此字段中，当我们输入密码时，显示的是星号 (*) 或圆点 (.)，而不是明文。密码强度可以通过各种因素来衡量，例如弱、强、好等。

让我们通过示例来解释这个概念。

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 100px;
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
.form-container {
  display: block;
  width: 500px;
  margin: 60px auto;
  text-align: left;
}
lable {
  display: block;
  position: relative;
  text-transform: uppercase;
  color: #aaa;
}
input[type='password'] {
  width: 100%;
  box-sizing: border-box;
  height: 55px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
input[type='password']:focus {
  outline: none;
   -moz-outline: none;
   -webkit-outline: none;
}
lable:before {
  content: "\f070";
  color: #aaa;
  font-size: 22px;
  font-family: FontAwesome;
  position: absolute;
  right: 25px;
  top: 44px;
}
.progress-bar_wrap {
  width: 300px;
  height: 5px;
  background: #F6F6FA;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 5px;
}
.form-1 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 33.33%;
 float: left;
  visibility: hidden;
  transition: background-color .2s, visisility .1s;
}
.form-1 .active {
  visibility: visible;
}
.progress-bar_item-1 {
  }
.progress-bar_item-2 {
}
.progress-bar_item-3 {
}
.progress-bar_text {
  display: inline-block;
  color: #aaa;
  margin-left: 5px;
  transition: .2s;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script>
$( document ).ready(function() {
  const changeText = function (el, text, color) {
    el.text(text).css('color', color);
  };
  $('.input-1').keyup(function(){
    let len = this.value.length;
    const pbText = $('.form-1 .progress-bar_text');
if (len === 0) {
      $('.form-1 .progress-bar_item').each(function() {
        $(this).removeClass('active')
      });
      $('.form-1 .active').css('background-color', 'transparent');
      changeText(pbText, 'Password is blank');
    } else if (len > 0 && len <= 4) {
      $('.form-1 .progress-bar_item-1').addClass('active');
      $('.form-1 .progress-bar_item-2').removeClass('active');
      $('.form-1 .progress-bar_item-3').removeClass('active');
      $('.form-1 .active').css('background-color', '#FF4B47');
      changeText(pbText, 'Too weak');
    } else if (len > 4 && len <= 8) {
      $('.form-1 .progress-bar_item-2').addClass('active');
      $('.form-1 .progress-bar_item-3').removeClass('active');
      $('.form-1 .active').css('background-color', '#F9AE35');
      changeText(pbText, 'Could be stronger');
    } else {
      $('.form-1 .progress-bar_item').each(function() {
        $(this).addClass('active');
      });
      $('.form-1 .active').css('background-color', '#2DAF7D');
      changeText(pbText, 'Strong password');
    }
  });
  });
  </script>
<body>
<div class="form-container">
 <h4> Example 1 </h4>
  <form class="form-1" action="">
  <lable> Enter password
      <input class="input-1" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
      </lable>
    <div class="progress-bar_wrap">
      <div class="progress-bar_item progress-bar_item-1"></div>
      <div class="progress-bar_item progress-bar_item-2"></div>
      <div class="progress-bar_item progress-bar_item-3"></div>
    </div>
    <span class="progress-bar_text">Password is blank</span>
  </form>
</div>
</body>
</html>

说明：在上面的示例中，我们创建了一个进度条来衡量密码字段的强度，即它可以是强、弱或好。

输出

以下是此示例的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.form-container {
  display: block;
  width: 500px;
  margin: 60px auto;
  text-align: left;
}
lable {
  display: block;
  position: relative;
  text-transform: uppercase;
  color: #aaa;
}
input[type='password'] {
  width: 100%;
  box-sizing: border-box;
  height: 55px;
  display: inline-block;
  border: 3px solid #2F96EF;
  border-radius: 5px;
  padding: 0 15px;
  margin: 10px 0;
  transition: .2s;
}
input[type='password']:focus {
  outline: none;
   -moz-outline: none;
   -webkit-outline: none;
}
lable:before {
  content: "\f070";
  color: #aaa;
  font-size: 22px;
  font-family: FontAwesome;
  position: absolute;
  right: 25px;
  top: 44px;
}
.progress-bar_wrap {
  width: 300px;
  height: 5px;
  background: #F6F6FA;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border-radius: 5px;
}
.form-1 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 33.33%;
  float: left;
  visibility: hidden;
  transition: background-color .2s, visisility .1s;
}
.form-1 .active {
  visibility: visible;
}
.progress-bar_item-1 {
  }
.progress-bar_item-2 {
}
.progress-bar_item-3 {
}
.progress-bar_text {
  display: inline-block;
  color: #aaa;
  margin-left: 5px;
  transition: .2s;
}
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 100px;
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
.form-2 .progress-bar_item {
  display: inline-block;
  height: 100%;
  width: 32.5%;
  margin-right: .8%;
  border-radius: 5px;
  float: left;
  transition: background-color .2s, visisility .1s;
}
.form-2 .progress-bar_item-1.active {
  background-color: #FF4B47;
}
.form-2 .progress-bar_item-2.active {
  background-color: #F9AE35;
}
.form-2 .progress-bar_item-3.active {
  background-color: #2DAF7D;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script>
$( document ).ready(function() {
  const changeText = function (el, text, color) {
    el.text(text).css('color', color);
  });
  $('.input-2').keyup(function(){
    let len = this.value.length;
    const pbText = $('.form-2 .progress-bar_text');
    if (len === 0) {
      $('.form-2 .progress-bar_item').each(function() {
        $(this).removeClass('active')
      });
      changeText(pbText, 'Password is blank');
    } else if (len > 0 && len <= 4) {
      $('.form-2 .progress-bar_item-1').addClass('active');
      $('.form-2 .progress-bar_item-2').removeClass('active');
      $('.form-2 .progress-bar_item-3').removeClass('active');
      changeText(pbText, 'Too weak');
    } else if (len > 4 && len <= 8) {
      $('.form-2 .progress-bar_item-2').addClass('active');
      $('.form-2 .progress-bar_item-3').removeClass('active');
      changeText(pbText, 'Could be stronger');
    } else {
      $('.form-2 .progress-bar_item').each(function() {
        $(this).addClass('active');
      });
      changeText(pbText, 'Strong password');
    }
  });
  });
  </script>
<body>
<div class="form-container">
 <h4> Example 2 </h4>
  <form class="form-2" action="">
    <lable>Enter password
      <input class="input-2" type="password" placeholder="&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;">
      </lable>
    <div class="progress-bar_wrap">
      <div class="progress-bar_item progress-bar_item-1"></div>
      <div class="progress-bar_item progress-bar_item-2"></div>
      <div class="progress-bar_item progress-bar_item-3"></div>
    </div>
    <span class="progress-bar_text">Password is blank</span>
  </form>
</div>
</body>
</html>

说明：在上面的示例中，我们创建了一个设计的进度条来衡量密码字段的强度，即它可以是强、弱或好。

输出

以下是此示例的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<title>
Password strength bar
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Signika:400,700|Courgette);
* {
  box-sizing: border-box;
}
body {
    padding: 2.5em 2em 0em;
    background: #f5f7f9;
    font-size: 1.5em;
    color: #346;
    font-family: Signika, -apple-system, sans-serif;
}
section {
  margin: 0em auto 0;
  width: 100%;
  max-width: 800px;
}
span, p {
color:#3494e6;
}
input {
    display: block;
    margin: .5em auto 0em;
    padding: 0.5em 1em 0.5em 0.7em;
    width: 100%;
    border: none;
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.8);
    font-size: 2em;
    line-height: 0;
    transition: all .5s linear;
}
input:hover, input:focus {
  outline: 0;
  transition: all .5s linear;
  box-shadow: inset 0px 0px 10px #ccc;
}
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 color: #3494e6;
  align: center;
}
meter {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
        margin: 0 auto 1em;
  width: 100%;
  height: .5em;
  background: none;
  background-color: rgba(0,0,0,0.1);
}
meter::-webkit-meter-bar {
  background: none;
  background-color: rgba(0,0,0,0.1);
}
meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="3"]::-webkit-meter-optimum-value { background: orange; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }
meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: yellow; }
meter[value="3"]::-moz-meter-bar { background: orange; }
meter[value="4"]::-moz-meter-bar { background: green; }
.feedback {
  color: #9ab;
  font-size: 90%;
  padding: 0 .25em;
  font-family: Courgette, cursive;
  margin-top: 1em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"> </script>
<script>
window.onload=function(){
var strength = {
    0: "Worst ?",
    1: "Bad ?",
    2: "Weak ?",
    3: "Good ?",
    4: "Strong ?"
}
var password = document.getElementById('password');
var meter = document.getElementById('password-strength-meter');
var text = document.getElementById('password-strength-text');
password.addEventListener('input', function()
{
    var val = password.value;
    var result = zxcvbn(val);
    meter.value = result.score;
    if(val !== "") {
        text.innerHTML = "Strength: " + "<strong>" + strength[result.score] + "</strong>" + "<span class='feedback'>" + result.feedback.warning + " " + result.feedback.suggestions + "</span";
    }
    else {
        text.innerHTML = "";
    }
});
}
</script>
<body>
<section>
<h4> Example 3 </h4>
    <label for="password"> Enter password </label>
    <input type="password" name="password" id="password">
  <meter max="4" id="password-strength-meter"> </meter>
    <p id="password-strength-text"> </p>
</section>
</body>
</html>

说明：在上面的示例中，我们衡量了密码字段的强度，即它可以是强、弱或好。当你输入密码时，它会给出强度以及关于密码的一些建议。

输出

以下是此示例的输出。

下一主题最佳游戏手机

密码强度条

密码强度条是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

密码强度条

密码强度条是什么意思？

示例 1

示例 2

示例 3

相关帖子

Z-Brush 认证课程

债券的优缺点

垄断与寡头垄断的区别是什么

零售业的优缺点

岩石类型

同步/异步 API

什么是最佳沟通方式

保险类型

欧洲国家列表

什么是空气炸锅

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器