密码强度有4个状态，分别如下图。

无密码状态

密码低级状态

密码中级状态

密码高级状态

实现的代码主要如下：

HTML代码

<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="pwd_Weak" class="pwd pwd_c"> </td>
<td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
<td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td>
</tr>
</table>

CSS代码

.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;} 
.pwd_f{color:#BBBBBB;} 
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
.pwd_c_r{border-right:1px solid #D0D0D0;} 
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;} 
.pwd_Medium_c_r{border-right:1px solid #E9AE10;} 
.pwd_Strong_c_r{border-right:1px solid #267A12;}

JS代码

function CheckIntensity(pwd) {
    var Mcolor, Wcolor, Scolor, Color_Html;    
    var m = 0;   
    //匹配数字
    if (/\d+/.test(pwd)) {
      debugger;
      m++;
    };
    //匹配字母
    if (/[A-Za-z]+/.test(pwd)) {     
      m++;
    };
    //匹配除数字字母外的特殊符号
    if (/[^0-9a-zA-Z]+/.test(pwd)) {      
      m++;
    };
    
    if (pwd.length <= 6) { m = 1; }
    if (pwd.length <= 0) { m = 0; }    
    switch (m) {
      case 1:
        Wcolor = "pwd pwd_Weak_c";
        Mcolor = "pwd pwd_c";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "弱";
        break;
      case 2:
        Wcolor = "pwd pwd_Medium_c";
        Mcolor = "pwd pwd_Medium_c";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "中";
        break;
      case 3:
        Wcolor = "pwd pwd_Strong_c";
        Mcolor = "pwd pwd_Strong_c";
        Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";
        Color_Html = "强";
        break;
      default:
        Wcolor = "pwd pwd_c";
        Mcolor = "pwd pwd_c pwd_f";
        Scolor = "pwd pwd_c pwd_c_r";
        Color_Html = "无";
        break;
    }
    document.getElementById('pwd_Weak').className = Wcolor;
    document.getElementById('pwd_Medium').className = Mcolor;
    document.getElementById('pwd_Strong').className = Scolor;
    document.getElementById('pwd_Medium').innerHTML = Color_Html;
  }  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js  # 注册  # 密码强度  # JavaScript正则表达式实现注册信息校验功能  # javascript使用正则表达式实现注册登入校验  # js实现登录注册框手机号和验证码校验（前端部分）  # JavaScript 完成注册页面表单校验的实例  # js简单实现用户注册信息的校验代码  # 拦截JSP页面  # 校验是否已登录详解及实现代码  # 微信+angularJS的SPA应用中用router进行页面跳转  # jssdk校验失败问题解决  # js实现注册页面校验功能  # 大家多多  # 如下图  # 特殊符号  # pwd_c  # pwd  # pwd_Medium  # pwd_Strong  # pwd_f  # tr  # cellspacing  # td  # pwd_Weak  # id  # pwd_c_r  # height  # px  # line  # CSS  # padding 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Swift中循环语句中的转移语句 break 和 continue  Win11怎么修改DNS服务器 Win11设置DNS加速网络【指南】  Android滚轮选择时间控件使用详解  Laravel如何发送系统通知？（Notification渠道示例）  如何在IIS管理器中快速创建并配置网站？  如何基于云服务器快速搭建个人网站？  JS中对数组元素进行增删改移的方法总结  如何在新浪SAE免费搭建个人博客？  Laravel中的withCount方法怎么高效统计关联模型数量  大连网站制作费用,大连新青年网站，五年四班里的视频怎样下载啊？  Laravel如何处理异常和错误？（Handler示例）  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  网站制作软件免费下载安装,有哪些免费下载的软件网站？  Laravel如何使用Collections进行数据处理？（实用方法示例）  打造顶配客厅影院，这份100寸电视推荐名单请查收  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音  Laravel如何安装使用Debugbar工具栏_Laravel性能调试与SQL监控插件【步骤】  Linux后台任务运行方法_nohup与&使用技巧【技巧】  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  php在windows下怎么调试_phpwindows环境调试操作说明【操作】  如何在云主机上快速搭建多站点网站？  ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  如何用搬瓦工VPS快速搭建个人网站？  用yum安装MySQLdb模块的步骤方法  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  利用JavaScript实现拖拽改变元素大小  如何为不同团队 ID 动态生成多个非值班状态按钮  使用C语言编写圣诞表白程序  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  家族网站制作贴纸教程视频,用豆子做粘帖画怎么制作？  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  香港服务器租用每月最低只需15元？  laravel怎么为API路由添加签名中间件保护_laravel API路由签名中间件保护方法  如何快速生成凡客建站的专业级图册？  EditPlus中的正则表达式 实战(1)  Laravel如何配置任务调度？（Cron Job示例）  新三国志曹操传主线渭水交兵攻略  Laravel如何实现数据导出到CSV文件_Laravel原生流式输出大数据量CSV【方案】  如何自定义建站之星模板颜色并下载新样式？  Laravel如何生成和使用数据填充？（Seeder和Factory示例）  b2c电商网站制作流程,b2c水平综合的电商平台？  Laravel Docker环境搭建教程_Laravel Sail使用指南  公司门户网站制作流程,华为官网怎么做？  如何在企业微信快速生成手机电脑官网？  教你用AI润色文章，让你的文字表达更专业