JavaScript密码强度提示

最新推荐文章于 2022-07-04 10:06:41 发布
最新推荐文章于 2022-07-04 10:06:41 发布
阅读量3.4k 收藏
点赞数
分类专栏： 前端js 
 
 

  
  

   
   

    
    
 
        
 
         
 
          输入密码的时候，根据密码的复杂程度给出弱、中和强等类似的提示。  
         
 
         
 
          下面分享使用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){}，创建一个函数用来判断密码强度。

Return_KB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决密码强度
09-04
用户注册显示密码的强度，提示用户修改密码！
html显示密码弱中强,JS判断密码强度-强中弱三个级别
weixin_34116482的博客
06-17 660
JS判断密码强度//判断输入密码的类型functionCharMode(iN){if(iN>=48&&iN<=57)//数字return1;if(iN>=65&&iN<=90)//大写return2;if(iN>=97&&iN<=122)//小写return...
SSM+JS密码强弱度提示
冷秋凋零你可知的博客
03-26 238
撰写时间：2019年1月27日 一、功能实现 效果图： 二、功能实现 效果图：
JavaScript判断密码强度并修改密码强制强密码
波波豆奶
09-29 1026
本篇文章主要借鉴这篇：https://www.cnblogs.com/phpfensi/p/4333870.html 刚入门，写的很渣，做个记录。 此函数强密码定义：密码由大写字母、小写字母、数字、符号中的至少三类组成，长度至少为5个字符。 密码强度显示如图： 未输入强密码提交会出现如下提示： 修改密码模态框： <div class="form-group"> <label class="col-sm-3 control-label">新密码<
Abp Vnext修改密码强度
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
07-04 802
Abp Vnext修改密码强度
javascript实现密码强度显示
10-24
主要介绍了使用javascript实现密码强度显示，十分实用的功能，从个人项目中移植出来的，分享给大家，希望大家能够喜欢。
JavaScript动态检验密码强度的实现方法
10-21
平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。那么这种效果怎么实现的呢？下面小编给大家介绍下js动态检验密码强度的实现方法，...
javascript密码强度
07-30
当你输入密码时，会提示你输入的密码是低、中、高哪一个。
JavaScript实现密码强度实时验证
11-20
JavaScript实现密码强度实时验证，供大家参考，具体内容如下 在网络服务中，为了保证用户的私密信息足够安全，会要求用户输入具有一定安全级别的密码，这样可以更好的防止他人盗用。比如在注册一些游戏账号时，如果...
js 简单的密码强度提示
想飞的猪的博客
09-04 1152
&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
使用javascript对密码进行有密码强度提示的验证
weixin_30375247的博客
09-18 542
好些网站的注册功能中，都有对密码进行验证并且还有强度提示。下面就来实现这种效果。密码强度说明：密码强度：弱——纯数字，纯字母，纯符号密码强度：中——数字，字母，符号任意两种的组合密码强度：强——数字，字母，符号全部都要有实现思路：在输入框提示区域编写两个div层，一个显示提示文字，一个显示密码强度提示。给文本框添加onkeyup的验证事件：1.没有输入时，显示“密码可由字母、数字、特殊符号组成...
javascript密码强度提示
weixin_30832351的博客
08-15 115
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="PasswordStrong._Default"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www....
开发网站相关知识html和javascript
weixin_34159110的博客
03-28 2087
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...
前端JS弱密码验证
abs625的博客
08-30 2108
前端JS弱密码验证前言JS文件使用姿势尾巴 前言 最近在学习uniapp开发，开发过程中要对用户密码做弱密码校验，然后总结了下常用的弱密码规则和校验方式，通过封装成js文件来提供一系列验证方法，下面就直接看封装后的leak-pwd-check.js文件。 JS文件 //是否连续3次出现重复字符 const regRepeat = /([0-9a-zA-Z])\1{2}/ //是否包含大写字母 const regUpperLetter = /(?=.*[A-Z])/ //是否包含小写字母 const regL
js密码强度
weixin_33946020的博客
08-12 92
&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
jq修改密码强度验证
乐夫天命兮的博客
12-12 1187
话不多说直接上代码 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
域用户无法修改密码问题的解决方案
热门推荐
运维日记
09-29 3万+
问题描述：加域的电脑无法更改密码，提示“无法更新密码,为新密码提供的值不符合字符域的长度、复杂度或历史要求”。 问题原因：域控制器中相关设置问题，主要如下图所示（如启用复杂性、最短期限和强制密码历史） 解决方案：在域控制器中更改对应的密码策略即可： ① 禁用复杂性要求 ② 最短使用期限改为0天 ③ 强制密码历史改为0 如果出现无法更改的情况，如下图箭头所指的图标所示 代表需要在域控制器的组策...
windows server 2016 组策略修改域账户密码强度、使用空密码 (使用组策略后仍无法修改密码长度、设置空密码的解决办法)
weixin_43850283的博客
09-12 1万+
windows server 2016 域控下，域账户使用空密码、降低密码强度、复杂性的实施（主要在修改了域服务器的组策略后，域用户仍然无法配置空密码的情况） 首先：正常情况下，域账户要设置空密码，或者低复杂的密码，按照百度或其他博文上的步骤操作即可，这里不详细说。 一般是在域控制器的组策略上面修改。（windows server 2016服务器的管理界面） 【下图↓】 按照：组策略——计算机配置——策略——window设置——安全设置——账户策略——密码策略，通过这个路径看到下图右边的设置，将密
vue3密码强度提示条
最新发布
09-12
Vue 3 中的密码强度提示条可以通过以下步骤实现： 1. 首先，在组件的模板文件中创建一个密码输入框： ```html <input type="password" v-model="password" @input="checkPasswordStrength"> ``` 2. 在组件的数据属性中定义一个用于存储密码的变量 `password` 和一个用于表示密码强度的变量 `passwordStrength`： ```javascript data() { return { password: '', passwordStrength: '' } }, ``` 3. 创建一个方法 `checkPasswordStrength`，该方法将根据密码的内容计算密码强度并更新 `passwordStrength` 的值。可以使用正则表达式和条件语句来判断密码的强度： ```javascript methods: { checkPasswordStrength() { let strength = ''; if (this.password.length >= 8) { strength = '强'; } else if (this.password.length >= 6) { strength = '中'; } else { strength = '弱'; } this.passwordStrength = strength; } }, ``` 4. 最后，在模板中显示密码强度提示条： ```html <div class="password-strength"> 密码强度：{{ passwordStrength }} </div> ``` 你可以根据需要自定义样式和逻辑来实现更复杂的密码强度提示条。希望这可以帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值