当前位置：首页 > article >正文

Jvascript网页设计案例：通过js实现一款密码强度检测，适用于等保测评整改

article 2026/4/19 0:25:23

本文目录

前言
功能预览
样式特点总结：
- 1. 整体视觉风格
- 2. 密码输入框设计
- 3. 强度指示条
- 4. 结果文本与原因说明
功能特点总结：
- 1. 密码强度检测
- 2. 实时反馈机制
- 3. 详细原因说明
- 4. 视觉提示
- 5. 交互体验优化
密码强度检测逻辑
Html代码
Javascript代码

前言

能满足等级保护测评要求的基本功能都实现了，可能还存在部分功能没有添加，密码强度验证逻辑可能还有需要强化的地方，有问题欢迎评论区讨论~

功能预览

在这里插入图片描述

样式特点总结：

1. 整体视觉风格

使用深色主题背景，搭配线性渐变（从 #141E30 到 #243B55），营造专业且现代的视觉效果。
容器使用半透明黑色背景（rgba(0, 0, 0, 0.6)），边缘带有圆角（border-radius: 15px）和阴影效果（box-shadow），提升界面的层次感。

2. 密码输入框设计

输入框采用无边框设计，背景色为浅灰色（rgba(255, 255, 255, 0.1)），聚焦时背景色变深（rgba(255, 255, 255, 0.2)），提供良好的交互反馈。
输入框字体大小适中（font-size: 16px），占满容器宽度（width: 100%），确保良好的可用性。

3. 强度指示条

强度指示条由三个彩色块组成（红色 #FF4136、黄色 #FFDC00、绿色 #2ECC40），每个块的高度固定（height: 10px），宽度随强度变化。
使用过渡效果（transition: width 0.3s ease）使颜色块变化平滑。
未激活的块设置为低透明度（.hidden { opacity: 0.2; }），增强视觉层次。

4. 结果文本与原因说明

结果文字根据强度不同显示不同颜色（弱：红色；中：黄色；强：绿色）。
原因说明部分使用无序列表展示具体原因，左侧带有项目符号（list-style-type: disc），排版清晰易读。

功能特点总结：

1. 密码强度检测

检测密码的长度（最低要求 8 位）、字符类型（大写/小写字母、数字、特殊字符）以及是否存在安全隐患（如连续数字、重复字符、键盘规律等）。
提供三种强度评级：弱（Weak）、中（Medium）、强（Strong），并实时更新结果。

2. 实时反馈机制

在用户输入过程中，实时检测密码强度并更新界面显示。
当密码为空时，提示用户“请输入密码”。

3. 详细原因说明

对于强度较弱或中等的密码，显示具体原因（如“密码长度不足8位”、“包含连续数字”等），帮助用户改进密码。

4. 视觉提示

使用颜色块动态展示密码强度，直观明了。
不同强度对应不同的颜色和提示信息，便于用户快速理解结果。

5. 交互体验优化

输入框聚焦时背景色变化，提供良好的交互反馈。
原因说明部分使用无序列表，排版清晰，易于阅读。

密码强度检测逻辑

这个密码强度检测工具的核心逻辑主要集中在 checkPasswordStrength 函数中。以下是详细的逻辑总结：

基础条件检测
密码强度检测基于以下基础条件：

密码长度：密码长度必须至少为 8 位。
字符类型：密码必须包含以下至少两种字符类型：
- 大写字母（A-Z）
- 小写字母（a-z）
- 数字（0-9）
- 特殊字符（非字母数字字符）

安全性检查
密码强度检测还包括以下安全性检查：

连续数字：检测密码中是否包含连续的数字序列（例如 123、456 等）。
重复字符：检测密码中是否存在重复的字符（例如 aa、bb 等）。
键盘规律：检测密码是否符合常见的键盘输入规律（例如 qwe、123、asdf 等）。
跨行键盘规律：检测密码是否符合跨行键盘输入规律（例如 qaz、wsx 等）。

强度评级规则
根据上述条件，密码强度分为以下三个等级：
弱（Weak）：
- 密码长度不足 8 位。
- 密码仅包含两种或更少字符类型。
- 密码存在连续数字、重复字符或符合键盘输入规律。
- 密码缺少特殊字符。
中（Medium）：
- 密码长度达到 8 位以上。
- 密码包含三种字符类型。
- 密码不存在明显的安全风险（如连续数字、重复字符或键盘规律）。
强（Strong）：
- 密码长度达到 8 位以上。
- 密码包含四种字符类型（大写字母、小写字母、数字、特殊字符）。
- 密码不存在连续数字、重复字符或键盘规律。

详细逻辑流程
以下是 checkPasswordStrength 函数的详细逻辑流程：
初始检查：
- 如果密码为空，返回“请输入密码”的提示信息。
字符类型检测：
- 检查密码是否包含大写字母、小写字母、数字和特殊字符，并记录包含的字符类型。
安全性检查：
- 使用正则表达式检测密码中是否存在连续数字（SEQUENTIAL_NUMBER_REGEX）。
- 使用正则表达式检测密码中是否存在重复字符（REPEATED_CHARS_REGEX）。
- 使用正则表达式检测密码中是否存在键盘规律（KEYBOARD_REGEX）。
- 检查密码是否符合跨行键盘规律（通过 keyboardLayoutIndexes 和 keyboardLayout 实现）。
强度评级：
- 如果密码长度不足 8 位或存在明显安全风险（如连续数字、重复字符或键盘规律），评级为“弱”。
- 如果密码包含三种字符类型且不存在明显安全风险，评级为“中”。
- 如果密码包含四种字符类型且不存在任何安全风险，评级为“强”。
结果反馈：
- 返回密码强度评级和具体原因（例如“密码强度：弱”、“密码长度不足8位”等）。

Html代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>密码强度检测</title><style>body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 0;background: linear-gradient(to bottom right, #141E30, #243B55);color: #e0e0e0;display: flex;justify-content: center;align-items: center;min-height: 100vh;}.container {background-color: rgba(0, 0, 0, 0.6);padding: 40px;border-radius: 15px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);width: 400px;}h1 {color: #e0e0e0;text-align: center;margin-bottom: 30px;font-size: 28px;}/* 密码输入框样式 */.password-input {width: 100%;padding: 15px;margin-bottom: 20px;border: none;border-radius: 8px;box-sizing: border-box;background-color: rgba(255, 255, 255, 0.1);color: #e0e0e0;font-size: 16px;outline: none;transition: background-color 0.3s ease;}.password-input:focus {background-color: rgba(255, 255, 255, 0.2);}.strength-meter {height: 10px;width: 100%;background-color: rgba(255, 255, 255, 0.1);border-radius: 10px;margin-bottom: 20px;overflow: hidden;display: flex;}.strength-bar {height: 100%;transition: width 0.3s ease, background-color 0.3s ease;width: 33.33%;}.strength-bar:nth-child(1) {background-color: #FF4136; }.strength-bar:nth-child(2) {background-color: #FFDC00; }.strength-bar:nth-child(3) {background-color: #2ECC40; }.strength-bar.hidden {opacity: 0.2;}.result-text {margin-bottom: 10px;font-weight: bold;font-size: 18px;text-align: center;}.weak-text {color: #FF4136;}.medium-text {color: #FFDC00;}.strong-text {color: #2ECC40;}.reasons {margin-top: 20px;}.reasons p {margin-bottom: 10px;font-size: 16px;}.reasons ul {list-style-type: disc;padding-left: 20px;font-size: 14px;}</style>
</head><body><div class="container"><h1>密码强度检测</h1><input type="password" class="password-input" placeholder="请输入密码"><div class="strength-meter"><div class="strength-bar hidden"></div><div class="strength-bar hidden"></div><div class="strength-bar hidden"></div></div><div class="result-text"></div><div class="reasons"></div></div>
</body></html>

Javascript代码

<script>const passwordInput = document.querySelector('.password-input');const strengthBars = document.querySelectorAll('.strength-bar');const resultText = document.querySelector('.result-text');const reasonsDiv = document.querySelector('.reasons');const MIN_PASSWORD_LENGTH = 8;const SEQUENTIAL_NUMBER_REGEX = /(?:012|123|234|345|456|567|678|789|987|876|765|654|543|432|321|210)/;const REPEATED_CHARS_REGEX = /([a-zA-Z])\1/i;const keyboardLayout = ['`1234567890-=','qwertyuiop[]\\','asdfghjkl;\'','zxcvbnm,./'].join('');const keyboardLayoutIndexes = {};for (let i = 0; i < keyboardLayout.length; i++) {keyboardLayoutIndexes[keyboardLayout[i]] = i;}// 键盘规律正则表达式const keyboardPatterns = [// 单行规律 'qwe', 'wer', 'ert', 'rty', 'tyu', 'yui', 'uio', 'iou','asd', 'sdf', 'dfg', 'fgh', 'ghj', 'hjk', 'jkl','zxc', 'xcv', 'cvb', 'vbn',// 符号键盘 '!@#', '@#$', '#$%', '$%^', '%^&', '^&*', '&*(','!qwe', '@wsx', '#edc', '$rfv', '%tgb', '^yhn', '&ujm', '*k,',// 数字键盘 '123', '234', '345', '456', '567', '678', '789','987', '876', '765', '654', '543', '432', '321','147', '258', '369',// 跨行规律 'qaz', 'wsx', 'edc', 'rfv', 'tgb', 'yhn', 'ujm', 'k\\.,','QAZ', 'WSX', 'EDC', 'RFV', 'TGB', 'YHN', 'UJM', 'K\\.,',// 符号+字母跨行 '!qaz', '@wsx', '#edc', '$rfv', '%tgb', '^yhn', '&ujm', '*k,','!QAZ', '@WSX', '#EDC', '$RFV', '%TGB', '^YHN', '&UJM', '*K,',// 数字+字母跨行 '1qaz', '2wsx', '3edc', '4rfv', '5tgb', '6yhn', '7ujm', '8k,','1QAZ', '2WSX', '3EDC', '4RFV', '5TGB', '6YHN', '7UJM', '8K.',// 添加大小写混合的情况'1QaZ', '2WsX', '3EdC', '4RfV', '5TgB', '6YhN', '7UjM', '8K.','!QaZ', '@WsX', '#EdC', '$RfV', '%TgB', '^YhN', '&UjM', '*K,'];const regexPatterns = keyboardPatterns.map(pattern => pattern.replace(/([.*+?^${}() |[\]\\])/g, '\\$1'));const KEYBOARD_REGEX = new RegExp(regexPatterns.join('|'), 'i');function checkPasswordStrength(password) {if (!password) {return { strength: 'empty', reasons: ['请输入密码'] };}const hasUpperCase = /[A-Z]/.test(password);const hasLowerCase = /[a-z]/.test(password);const hasNumbers = /\d/.test(password);const hasSpecialChars = /[^a-zA-Z\d]/.test(password);const charTypes = [];if (hasUpperCase) charTypes.push(' 大写字母');if (hasLowerCase) charTypes.push(' 小写字母');if (hasNumbers) charTypes.push(' 数字');if (hasSpecialChars) charTypes.push(' 特殊字符');const hasSequentialNumbers = SEQUENTIAL_NUMBER_REGEX.test(password);const hasRepeatedChars = REPEATED_CHARS_REGEX.test(password);const hasKeyboardPattern = KEYBOARD_REGEX.test(password);function hasSequentialKeyboardKeys(password) {for (let i = 0; i < password.length - 2; i++) {const charIndex = keyboardLayoutIndexes[password[i].toLowerCase()];const nextIndex = keyboardLayoutIndexes[password[i + 1].toLowerCase()];const nextNextIndex = keyboardLayoutIndexes[password[i + 2].toLowerCase()];if (nextIndex === charIndex + 1 && nextNextIndex === nextIndex + 1) {return true;}}return false;}const reasons = [];if (password.length < MIN_PASSWORD_LENGTH) {reasons.push(' 密码长度不足8位');}if (hasSequentialNumbers) {reasons.push(' 包含连续数字');}if (hasRepeatedChars) {reasons.push(' 包含重复字符');}if (hasKeyboardPattern || hasSequentialKeyboardKeys(password)) {reasons.push(' 符合键盘输入规律');}if (!hasSpecialChars) {reasons.push(' 缺少特殊字符');}let strength;if ((charTypes.length <= 2 && password.length >= MIN_PASSWORD_LENGTH) ||reasons.length > 1 ||hasSequentialKeyboardKeys(password)) {strength = 'weak';reasons.unshift(' 密码强度：弱');} else if (charTypes.length === 4 &&!hasKeyboardPattern &&!hasSequentialNumbers &&!hasRepeatedChars &&!hasSequentialKeyboardKeys(password)) {strength = 'strong';reasons.unshift(' 密码强度：强');} else {strength = 'medium';reasons.unshift(' 密码强度：中');}return { strength, reasons };}document.addEventListener('input', function (event) {if (event.target === passwordInput) {const result = checkPasswordStrength(event.target.value);strengthBars.forEach((bar, index) => {if (result.strength === 'weak') {if (index === 0) {bar.classList.remove('hidden');} else {bar.classList.add('hidden');}} else if (result.strength === 'medium') {if (index < 2) {bar.classList.remove('hidden');} else {bar.classList.add('hidden');}} else if (result.strength === 'strong') {bar.classList.remove('hidden');} else {bar.classList.add('hidden');}});if (result.strength === 'empty') {resultText.innerHTML = '';reasonsDiv.innerHTML = '';return;}resultText.className = `${result.strength}-text`;resultText.innerHTML = result.reasons[0];if (result.strength === 'weak' || result.strength === 'medium') {reasonsDiv.innerHTML = `<p>原因：</p><ul>${result.reasons.slice(1).map(r => `<li>${r}</li>`).join('')}</ul>`;} else {reasonsDiv.innerHTML = '';}}});</script>

Jvascript网页设计案例：通过js实现一款密码强度检测，适用于等保测评整改

本文目录前言功能预览样式特点总结：1. 整体视觉风格2. 密码输入框设计3. 强度指示条4. 结果文本与原因说明功能特点总结：1. 密码强度检测2. 实时反馈机制3. 详细原因说明4. 视觉提示5. 交互体验优化密码强度检测逻辑Html代码Javascript代码前言能满…...

编程日记 2026/4/10 5:28:57

LeetCode刷题---哈希表---290

单词规律 290. 单词规律 - 力扣（LeetCode） 题目： 给定一种规律 pattern 和一个字符串 s ，判断 s 是否遵循相同的规律。这里的遵循指完全匹配，例如， pattern 里的每个字母和字符串 s 中的每个非空单词…...

编程日记 2025/11/2 4:13:34

用React实现一个登录界面

使用React来创建一个简单的登录表单。以下是一个基本的React登录界面示例： 1. 设置React项目如果你还没有一个React项目，你可以使用Create React App来创建一个。按照之前的步骤安装Create React App，然后创建一个新项目。 2. 创建登录组…...

编程日记 2026/4/10 5:29:46

图论：tarjan 算法求解强连通分量

题目描述有一个 n n n 个点， m m m 条边的有向图，请求出这个图点数大于 1 1 1 的强连通分量个数。输入格式第一行为两个整数 n n n 和 m m m。第二行至 m 1 m1 m1 行，每一行有两个整数 a a a 和 b b b，表示有一条…...

编程日记 2026/4/16 1:20:00

Haskell语言的物联网

Haskell语言在物联网中的应用引言物联网（IoT，Internet of Things）是现代科技发展的重要领域，它将日常生活中的各种设备通过互联网连接起来，实现智能化的控制与管理。随着设备数量的激增，以及数据处理需…...

编程日记 2025/10/15 5:54:58

Java：单例模式（Singleton Pattern）及实现方式

一、单例模式的概念单例模式是一种创建型设计模式，确保一个类只有一个实例，并提供一个全局访问点来访问该实例，是 Java 中最简单的设计模式之一。该模式常用于需要全局唯一实例的场景，例如日志记录器、配置管理、线程池、数据库…...

编程日记 2026/4/11 19:32:30

Python爬虫实战：股票分时数据抓取与存储 (1)

在金融数据分析中，股票分时数据是投资者和分析师的重要资源。它能够帮助我们了解股票在交易日内的价格波动情况，从而为交易决策提供依据。然而，获取这些数据往往需要借助专业的金融数据平台，其成本较高。幸运的是，通过…...

编程日记 2026/4/12 19:42:14

将图片base64编码后，数据转成图片

将图片数据进行base64编码后，可以在浏览器上查看图片，只需在前端加上data:image/png;base64,即可在线工具： Base64转图片 - 加菲工具...

编程日记 2026/4/16 11:24:23

天翼云910B部署DeepSeek蒸馏70B LLaMA模型实践总结

一、项目背景与目标本文记录在天翼云昇腾910B服务器上部署DeepSeek 70B模型的全过程。该模型是基于LLaMA架构的知识蒸馏版本，模型大小约132GB。 1.1 硬件环境 - 服务器配置：天翼云910B服务器 - NPU：8昇腾910B (每卡64GB显存) - 系统内存&…...

编程日记 2026/4/13 19:31:09

Budibase低代码平台体验

低代码平台还是很多的，体验了Nocobase，又开始体验Budibase, 其实Budibase和appsmith更相似一点。 Budibase的安装也很简单。 1.安装好操作系统Debian； 2.安装好docker, docker-compose 3.创建目录/data,在里面参考内容创建文件docker-compos…...

编程日记 2025/12/17 20:52:02

Playwright 自动化测试系统学习

入门 Playwright安装：Playwright入门之---安装-CSDN博客生成测试：Playwright入门之---生成测试-CSDN博客命令汇总：Playwright入门之---命令-CSDN博客...

编程日记 2025/11/4 8:57:30

Jetson Agx Orin平台preferred_stride调试记录--1924x720图像异常

1.问题描述硬件： AGX Orin 在Jetpack 5.0.1和Jetpack 5.0.2上测试验证图像分辨率在1920x720和1024x1920下图像采集正常但是当采集图像分辨率为1924x720视频时，图像输出异常像素格式：yuv_uyvy16 gstreamer命令如下 gst-launch-1.0 v4l2src device=/dev/video0 ! …...

编程日记 2026/4/18 23:13:43

DeepSeek冲击（含本地化部署实践）

DeepSeek无疑是春节档最火爆的话题，上线不足一月，其全球累计下载量已达4000万，反超ChatGPT成为全球增长最快的AI应用，并且完全开源。那么究竟DeepSeek有什么魔力，能够让大家趋之若鹜，他又将怎样改变世界AI格…...

编程日记 2026/4/11 16:06:20

CF 144A.Arrival of the General(Java实现)

题目分析一个n个身高数据，问最高的到最前面，最矮的到最后面的最短交换次数思路分析首先，如果数据有重复项，例如示例二中，最矮的数据就是最后一个出现的数据位置，最高的数据就是最先出现的数据位置&…...

编程日记 2026/4/13 19:36:45

set的使用（c++）

STL里面已经为我们实现了两种红黑树，一种是存储关键字的set，另一种是存储双关键字的map，今天主要来了解set，无论是set还是map后面都跟一个multi，它们区别是set 不能存相同元素， multiset 可以存相同的元素&…...

编程日记 2026/4/12 6:33:29

未加cont修饰的左值引用不能绑定到右值

目录一、问题背景二、错误分析三、警告分析一、问题背景在initial value of reference to non-const - C Forum看到如下有问题的代码，编译如下代码看看 #include <iostream> #include <cmath>int g(double x) { return std::floor(x); } int&a…...

编程日记 2026/1/3 10:31:16

sprouted tater 发芽的土豆 fluid 液体，流体 The doctor recommended drinking plenty of fluids 医生建议多喝流质适应新环境 adapt to the new environment adjust to the new surroundings get used to the new setting accommodate oneself to the new circu…...

编程日记 2025/7/3 22:25:21

IDEA单元测试插件 SquareTest 延长试用期权限

SquareTest是一款强大的IDEA单元测试生成插件工具，具体使用方法就不过多介绍了，这里主要介绍变更试用期，方便大家使用配置信息我的电脑安装前提配置条件 IntelliJ IDEA 2023.2windows 系统软件安装 IntelliJ IDEA 直接安装插件Squar…...

编程日记 2026/4/18 13:45:29

25/2/17 ＜嵌入式笔记＞桌宠代码解析

这个寒假跟着做了一个开源的桌宠，我们来解析下代码，加深理解。代码中有开源作者的名字。可以去B站搜着跟着做。首先看下main代码 #include "stm32f10x.h" // Device header #include "Delay.h" #include &quo…...

编程日记 2026/4/18 21:19:49

C/C++字符串格式化全解析：从printf到std::format的安全演进与实战指南

目录 C 语言中的格式化函数对比 1. printf / fprintf / sprintf 的异同 C 中的字符串格式化 1. 流式输出 (std::ostringstream) 2. C20/23 格式化库 (std::format，需编译器支持) 跨语言对比与最佳实践实战建议总结 C 语言中的格式化函数对比 1. printf / …...

编程日记 2025/12/25 8:23:11

油田安全系统：守护能源生命线的坚固壁垒

油田安全系统：不可或缺的能源护盾在能源领域，油田作为国家重要的能源供应基地，其安全生产的重要性不言而喻。油田安全系统犹如一道坚固的护盾，全方位守护着人员生命、企业财产以及生态环境，是油田平稳运行与可持续发展…...

编程日记 2026/4/15 7:55:42

【Python】实现文件移动与文件夹删除工具

【Python】实现文件移动与文件夹删除工具一、代码整体结构界面创建选择文件夹移动并删除操作处理文件重名问题打开文件夹二、功能介绍三、作者有话说在日常的文件管理工作中，我们常常需要将某个文件夹下子文件夹中的文件统一移动到主文件夹，并删除这…...

编程日记 2026/1/12 16:41:11

LeetCode-680. 验证回文串 II

1、题目描述： 给你一个字符串 s，最多可以从中删除一个字符。请你判断 s 是否能成为回文字符串：如果能，返回 true ；否则，返回 false 。示例 1： 输入：s "aba" 输出&a…...

编程日记 2026/2/28 21:54:26

【故障处理】- 执行命令crsctl query crs xxx一直hang

【故障处理】- 执行命令crsctl query crs xxx一直hang 一、概述二、故障处理三、解决方法一、概述 Oracle RAC环境中，遇到执行crsctl query crs xxx等相关命令不返回任何结果，一直hang在那里。系统下执行命令ps -ef |grep crsctl query crs softwarever…...

编程日记 2026/4/18 11:17:19

JMeter工具介绍、元件和组件的介绍

Jmeter功能概要 JDK常用文件目录介绍 Bin目录：存放可执行文件和配置文件 Docs目录：是Jmeter的API文档，用于开发扩展组件 printable_docs目录：用户帮助手册 lib目录：存放JMeter依赖的jar包和用户扩展所依赖的Jar包…...

编程日记 2026/4/10 5:29:36

【Python 语法】Python 正则表达式（regular expressions, regex）

1. 基本语法1.1 字符匹配1.2 元字符1.3 特殊字符1.4 分组和捕获1.5 断言2. 常用函数2.1 `re.match()`2.2 `re.search()`2.3 `re.findall()`2.4 `re.sub()`2.5 `re.split()`3. 进阶用法3.1 捕获组3.2 非捕获组3.3 预查Python 中的**正则表达式（regular expressions, regex）**是…...

编程日记 2025/10/2 15:15:32