Jvascript网页设计案例：通过js实现一款密码强度检测，适用于等保测评整改
本文目录
- 前言
- 功能预览
- 样式特点总结：
- 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代码 前言 能满…...
【Scrapy】Scrapy教程2——工作原理
文章目录 数据流组件引擎Engine调度器Scheduler下载器Downloader爬虫Spiders项目管道Item Pipeline下载器中间件Downloader Middlewares爬虫中间件Spider Middlewares 在学习Scrapy前，我们需要先了解其架构和工作原理，这样才能很好的去使用Scrapy。 Scra…...
探索 DeepSeek：AI 领域的璀璨新星
在人工智能飞速发展的当下，DeepSeek 作为行业内的重要参与者，正以独特的技术和广泛的应用备受瞩目。 DeepSeek 是一家专注于实现 AGI（通用人工智能）的中国人工智能公司。它拥有自主研发的深度学习框架，能高效处理海量…...
宏基传奇swift edge偶尔开机BIOS重置
电脑是acer swift edge， SFA16-41，出厂是Win11系统， BIOS版本出厂1.04，更新到了目前最新1.10。 问题是 会偶尔开机ACER图标变小跑到屏幕左上方，下次开机BIOS就会被重置，开机等待很长时间。 因为是偶尔现象的…...
自动驾驶---如何打造一款属于自己的自动驾驶系统
在笔者的专栏《自动驾驶Planning决策规划》中，主要讲解了行车的相关知识，从Routing，到Behavior Planning，再到Motion Planning，以及最后的Control，笔者都做了相关介绍，其中主要包括算法在量产上…...
【C语言】第一期——数据类型变量常量
目录 1 字面量 2 整数类型 2.1 整数类型的取值范围 2.1.1 sizeof 运算符 2.2 GB、MB、KB、B之间的关系 2.3 定义整数类型的变量并打印 2.4 整数类型代码演示 3 浮点类型 3.1 浮点类型的取值范围 3.2 定义浮点类型变量并打印 3.3 保留2位小数点 4 char字符型 4.1…...
04运维实用篇（D4_日志）
目录 一、简介 二、代码中使用日志工具记录日志 1. 操作步骤 步骤1：添加日志记录操作 步骤2：设置日志输出级别 步骤3：设置日志组 2. 知识小结 三、优化日志对象创建代码 1. 实例 2. 总结 四、日志输出格式控制 1. 实例 2. 总结 …...
centos部署open-webui
提示：本文将简要介绍一下在linux下open-webui的安装过程,安装中未使用虚拟环境。 文章目录 一、open-webui是什么？二、安装流程1.openssl升级2.Python3.11安装3.sqlite安装升级4.pip 下载安装open-webui 总结 一、open-webui是什么？ Open W…...
UE求职Demo开发日志#32 优化#1 交互逻辑实现接口、提取Bag和Warehouse的父类
1 定义并实现交互接口 接口定义： // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "UObject/Interface.h" #include "MyInterActInterface.generated.h…...
Visonpro 检测是否有缺齿
一、效果展示 二、上面是原展开工具CogPolarUnwrapTool； 第二种方法： 用Blob 和 CogCopyRegionTool 三、 用预处理工具 加减常数，让图片变得更亮点 四、圆展开工具 五、模板匹配 六、代码分解 1.创建集合和文子显示工具 CogGraphicCollec…...
第1章大型互联网公司的基础架构——1.6 RPC服务
你可能在1.1节的引言中注意到业务服务层包括HTTP服务和RPC服务，两者的定位不一样。一般来说，一个业务场景的核心逻辑都是在RPC服务中实现的，强调的是服务于后台系统内部，所谓的“微服务”主要指的就是RPC服务；而HTTP服…...
)
今日AI和商界事件(2025-02-15)
根据2025年2月15日的科技动态，以下是今日AI领域的重要事件及相关进展总结： 1. DeepSeek日活突破3000万，开源生态加速AI普惠 里程碑意义：开源大模型DeepSeek宣布日活跃用户数突破3000万，其R1模型凭借开源策略和低成本优…...
算法题（69）：搜索插入位置
审题： 需要我们在有序数组中找到等于target值的元素的下标若没有则返回target按顺序会插入的位置的索引 思路 ： 我们可以使用二分查找的方法 方法一：二分查找 和普通的二分查找不同，本题若没有找到就需要返回它按顺序插入的位置的…...
在 Linux 系统中，tc（Traffic Control） QoS 常用命令简介
在 Linux 系统中，tc（Traffic Control）命令是一个强大的工具，用于配置和管理网络流量控制。以下是 tc 命令的常用功能和基本用法： 1. 查看当前队列规则 使用以下命令查看指定网络接口上的队列规则： tc qd…...
如何画产品功能图、结构图
功能图的类型 常见的功能图包括数据流图、用例图、活动图、状态图、类图、组件图、部署图等等，不同的应用场景和目标下，需要确定不同的功能图类型。 数据流图 用例图 状态图 类图 组件图 组件图是由软件系统、组件和组件之间的关系组成的图形…...
4090单卡挑战DeepSeek r1 671b：尝试量化后的心得的分享
引言： 最近，DeepSeek-R1在完全开源的背景下，与OpenAI的O1推理模型展开了激烈竞争，引发了广泛关注。为了让更多本地用户能够运行DeepSeek，我们成功将R1 671B参数模型从720GB压缩至131GB，减少了80%ÿ…...
SpringBoot速成（12）文章分类P15-P19
1.新增文章分类 1.Postman登录不上，可以从头registe->login一个新的成员:注意，跳转多个url时，post/get/patch记得修改成controller类中对应方法上写的 2.postman运行成功： 但表中不更新：细节有问题： c是…...
C++17中的clamp函数
一、std::clamp() 其实在前面简单介绍过这个函数，但当时只是一个集中的说明，为了更好的理解std::clamp的应用，本篇再详细进行阐述一次。std::clamp在C17中其定义的方式为： template< class T > constexpr const T& cl…...
配置Open-R1，评测第三方蒸馏模型的性能1
年前DeepSeek不温不火，问题的响应极。一回车，就看模型如口吐莲花般，先是输出思维过程，虽然中间绕来绕去，但是输出回答时还是准确而简洁的。比如，用它来读当时出来的几篇文章，确实大大提升了效率…...
Chrome插件开发流程
Chrome插件开发流程可以分为以下几个主要步骤： ### 1. 确定插件功能和目标 在开始开发之前，首先需要明确插件的功能和目标。这包括： - **功能定义**：确定插件要解决的问题或提供的功能。 - **市场分析**：了解目标用户群…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
JavaScript 中的 ES|QL：利用 Apache Arrow 工具
作者：来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗？了解下一期 Elasticsearch Engineer 培训的时间吧！ Elasticsearch 拥有众多新功能，助你为自己…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
SpringTask-03.入门案例
一.入门案例 启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...