JavaScript密码强度提示

密码强度检测
最新推荐文章于 2025-09-26 02:00:31 发布
转载 最新推荐文章于 2025-09-26 02:00:31 发布 · 3.6k 阅读 · 0

本文介绍了一种使用JavaScript实时检测密码强度的方法。通过分析密码中的数字、字母及特殊字符，结合密码长度，来评估密码的安全级别。 
 

  

   

    

        

         

          输入密码的时候，根据密码的复杂程度给出弱、中和强等类似的提示。 
         

         

          下面分享使用JavaScript如何实现此效果。代码实例如下: 
         

         

          <!DOCTYPE html>
         

         

          <
          html
          >
         

         

          <
          head
          >
         

         

          <
          meta 
          charset
          =
          " utf-8"
          >
         

         

          <
          meta 
          name
          =
          "author" 
          content
          =
          "http://www.softwhy.com/" 
          />
         

         

          <
          head
          >
         

         

          <
          title
          >蚂蚁部落</
          title
          >
         

         

          <
          style 
          type
          =
          "text/css"
          >
         

         

          #pwdLever td{
         

         

            
          background-color:Gray;
         

         

            
          width:45px;
         

         

            
          text-align:center;
         

         

          }
         

         

          </
          style
          >
         

         

          <
          script 
          type
          =
          "text/javascript"
          >
         

         

          window.onload=function(){
         

         

            
          var textInput = document.getElementById("txtPwd");
         

         

            
          //给密码输入框 注册键放开事件
         

         

            
          textInput.onkeyup=function(){
         

         

              
          var pwdValue=this.value;
         

         

              
          var num=pwdChange(pwdValue);
         

         

              
          var tds=document.getElementById("pwdLever").getElementsByTagName("td");
         

         

              
          //修改密码颜色
         

         

              
          if(num==0||num==1){
         

         

                
          tds[0].style.backgroundColor="red";
         

         

                
          tds[1].style.backgroundColor="gray";
         

         

                
          tds[2].style.backgroundColor="gray";
         

         

              
          }
         

         

              
          else if(num == 2){
         

         

                
          tds[0].style.backgroundColor = "red";
         

         

                
          tds[1].style.backgroundColor = "red";
         

         

                
          tds[2].style.backgroundColor = "gray";
         

         

              
          }
         

         

              
          else if(num == 3) {
         

         

                
          tds[0].style.backgroundColor = "red";
         

         

                
          tds[1].style.backgroundColor = "red";
         

         

                
          tds[2].style.backgroundColor = "red";
         

         

              
          }
         

         

              
          else{
         

         

                
          tds[0].style.backgroundColor = "gray";
         

         

                
          tds[1].style.backgroundColor = "gray";
         

         

                
          tds[2].style.backgroundColor = "gray";
         

         

              
          }
         

         

            
          }
         

         

          }
         

         

          function pwdChange(v){
         

         

            
          var num = 0;
         

         

            
          var reg = /\d/; //如果有数字
         

         

            
          if (reg.test(v)) {
         

         

              
          num++;
         

         

            
          }
         

         

            
          reg = /[a-zA-Z]/; //如果有字母
         

         

            
          if(reg.test(v)){
         

         

              
          num++;
         

         

            
          }
         

         

            
          reg = /[^0-9a-zA-Z]/; //如果有特殊字符
         

         

            
          if(reg.test(v)) {
         

         

              
          num++;
         

         

            
          }
         

         

            
          //如果密码小于6 
         

         

            
          if(v.length < 6){ 
         

         

              
          num--;
         

         

            
          }
         

         

            
          return num;
         

         

          }
         

         

          </
          script
          >
         

         

          </
          head
          >
         

         

          <
          body
          >
         

         

          <
          table
          >
         

         

            
          <
          tr
          >
         

         

              
          <
          td
          ><
          input 
          type
          =
          "text" 
          id
          =
          "txtPwd" 
          /></
          td
          >
         

         

            
          </
          tr
          >
         

         

            
          <
          tr
          >
         

         

              
          <
          td
          >
         

         

               
          <
          table 
          id
          =
          "pwdLever"
          >
         

         

                  
          <
          tr
          >
         

         

                    
          <
          td
          >弱</
          td
          >
         

         

                    
          <
          td
          >中</
          td
          >
         

         

                    
          <
          td
          >强</
          td
          >
         

         

                  
          </
          tr
          >
         

         

                
          </
          table
          >
         

         

               
          </
          td
          >
         

         

            
          </
          tr
          >
         

         

          </
          table
          >
         

         

          </
          body
          >
         

         

          </
          html
          >

在输入密码的时候，显示当前密码的强度。下面介绍一下实现过程:

一.实现原理:

原理比较简单，当在密码框输入密码之后触发onkeyup事件进而执行事件处理函数，此函数可以判断当前密码框中的密码的强度，并返回一个值，然后根据此此设置三个单元格的背景颜色，也就实现了密码强度提示效果。

二.代码注释:

（1）.window.οnlοad=function(){}，当文档完全加载完毕再去执行函数中的代码。

（2）.var textInput=document.getElementById("txtPwd")，获取id值为txtPwd的对象。

（3）.textInput.οnkeyup=function(){}，为密码框绑定键盘按键onkeyup事件处理函数。

（4）.var pwdValue=this.value，获取密码框的值。

（5）. var num=pwdChange(pwdValue)，创建一个变量num并接收pwdChange()函数的返回值。

（6）.var tds=document.getElementById("pwdLever").getElementsByTagName("td")，获取id为pwdLever元素的下的所有单元格集合。

（7）.if(num==0||num==1){},根据num的值设置单元格的背景颜色。

（8）.function pwdChange(v){}，创建一个函数用来判断密码强度。

js 简单的密码强度提示
想飞的猪的博客
09-04 1238
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=" utf-8"&gt; &lt;meta name="author" content="http://www.softwhy.com/" /&gt; &lt;title&gt;蚂蚁部落&lt;/tit
html中显示密码强度的代码,javascript密码强度校验代码（两种方法）
weixin_42575109的博客
06-19 1070
先看效果图：javascript密码强度校验代码，具体实现思路不多说了，请看下面代码和demo。第一种方法：/**密码安全程度*return ：全部为字母或者数字,或者密码长度小于*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符*return : 字母和数字和特殊字符*/String.prototype.passwordStrength=function(){if(this....
改善用户体验之密码强度提示
weixin_34410662的博客
09-30 221
第一步：保存图片 第二步：根据您的需要修改js文件中该图片地址。如下所示： var bImg="pwdlen.gif";//一张显示用的图片 第三步：在需要检测的页面中引用这个脚本文件，如下所示： <script type="text/javascript" src="chkpwd.js"></script> 第四步：在网页的表单中，找到密码输入框添加onblu...
Ant Design表单密码强度：验证与密码提示实现
最新发布
gitblog_00085的博客
09-26 543
在用户注册或密码修改场景中，一个安全的密码策略至关重要。弱密码容易被猜测，可能导致用户账户安全风险。Ant Design（蚂蚁设计）作为企业级UI组件库，提供了灵活的表单验证机制，可帮助开发者轻松实现密码强度验证功能。本文将详细介绍如何使用Ant Design的Form组件实现密码强度验证与实时提示功能。 ## 基础密码验证实现 Ant Design的Form组件通过`rules`属性支持表单验...
Js判断密码强度并显示提示信息
weixin_30376509的博客
03-12 461
用javascipt实现的Ajax判断密码强弱的功能，大多数有用户注册功能的网站，都会有这么一个功能，作为WEB程序员，应该会写这种小模块哦，不懂的就看下这个例子，觉得挺简单，当初帮助了不少人学会了密码强度的检测。 表单部分，用来显示密码框和密码强度提示信息： <form name=form1 action="" > 请设置密码:<input type="passwor...
用JavaScript验证密码强度
duyiwuer888的专栏
11-19 223
    规则如下:     四种组合指 数字,小写字母,大写字母,其它字符 　　把密码强度分为四等: 　　1. 密码长度小于或等于四位.或者密码只有一种组合 　　2. 密码长度大于四位, 且有两种组合. 　　3. 密码长度大于四位, 且有三种组合. 　　4. 密码长度大于四位, 且有四种组合. 　　如果没有输入则返回0 　　判断函数:     &lt;script language="JavaSc...
SSM+JS密码强弱度提示
冷秋凋零你可知的博客
03-26 297
撰写时间：2019年1月27日 一、功能实现 效果图： 二、功能实现 效果图：
JavaScript 密码强度判断代码
10-29
根据`checkStrong`函数返回的强度级别，改变密码强度提示的背景颜色。颜色分为三类：弱（红色）、中（橙色）和强（绿色），以直观地告诉用户密码的安全程度。 在这个例子中，密码强度级别定义如下： 1. 如果只有...
javascript实现密码强度显示
10-24
在本篇介绍中，将阐述如何使用JavaScript实现密码强度的实时显示功能。密码强度显示是一个对用户非常有用的功能，它可以指导用户创建一个符合特定安全标准的密码。通常，一个强密码能够帮助更好地保护用户帐户的安全...
javascript密码强度校验代码（两种方法）
12-11
JavaScript密码强度校验是网络安全中一个重要的功能，用于确保用户设置的密码具有足够的复杂性，以防止被轻易破解。在给定的代码中，我们看到了两种实现JavaScript密码强度检查的方法。下面将详细解释这两种方法。 ...
html显示密码弱中强,JS判断密码强度-强中弱三个级别
weixin_34116482的博客
06-17 780
JS判断密码强度//判断输入密码的类型functionCharMode(iN){if(iN>=48&&iN<=57)//数字return1;if(iN>=65&&iN<=90)//大写return2;if(iN>=97&&iN<=122)//小写return...
修改密码时，js验证提示
08-23
form需要js验证时的demo
解决密码强度
09-04
用户注册显示密码的强度，提示用户修改密码！
JavaScript判断密码强度并修改密码强制强密码
波波豆奶
09-29 1281
本篇文章主要借鉴这篇：https://www.cnblogs.com/phpfensi/p/4333870.html 刚入门，写的很渣，做个记录。 此函数强密码定义：密码由大写字母、小写字母、数字、符号中的至少三类组成，长度至少为5个字符。 密码强度显示如图： 未输入强密码提交会出现如下提示： 修改密码模态框： <div class="form-group"> <label class="col-sm-3 control-label">新密码<
js密码强度
weixin_33946020的博客
08-12 128
&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;js密码强度&lt;/title&gt;&lt;style type="text/css"&gt;.pw_letter{ margin-top:5px; font-size: 12px
Abp Vnext修改密码强度
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
07-04 1128
Abp Vnext修改密码强度
登录 - 密码复杂度校验 - 提示用户修改密码 - 登录密码加密
工作中遇到问题记录
09-21 782
用户登录后判断密码复杂度不符合要求的话提示用户去修改密码 _ 登录密码加密
开发网站相关知识html和javascript
weixin_34159110的博客
03-28 2257
1.html 布局 https://github.com/bramstein/jlayout/ http://welcome.totheinter.net/columnizer-jquery-plugin/ http://www.jwf.us/projects/jQSlickWrap/ http://masonry.desandro.com/ http://layout.jquery-d...
jq修改密码强度验证
乐夫天命兮的博客
12-12 1265
话不多说直接上代码 HTML部分 &lt;div class="pwdForm"&gt; &lt;div class="class-pwd-title"&gt;修改密码&lt;/div&gt; &lt;div class="class-pwd-table"&gt; &lt;div class="class-input-l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值