JavaScript密码强度检测

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量458 收藏
点赞数
分类专栏： javascrip 文章标签： javascript border function input server class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faunjoe/article/details/4380828
版权

http://jhxk.javaeye.com/upload/attachment/116881/2e20756c-15b6-3a0e-98f0-910aab22e40e.jpg

 

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>密码强度检测</title>  
  5. <META http-equiv=Content-Type content="text/html; charset=utf-8">  
  6.     <style type="text/css">  
  7.     body {font-size:12px}   
  8.     .pwd-strength-box,   
  9.     .pwd-strength-box-low,   
  10.     .pwd-strength-box-med,   
  11.     .pwd-strength-box-hi   
  12.     {   
  13.     color: #464646;   
  14.     text-align: center;   
  15.     width: 40px;   
  16.     }   
  17.     .pwd-strength-box-low   
  18.     {   
  19.     color: #CCCCCC;   
  20.     background-color: #E0FFA2;   
  21.     width: 40px;   
  22.     }   
  23.     .pwd-strength-box-med   
  24.     {   
  25.     color: #666666;   
  26.     background-color: #D1FF46;   
  27.     width: 40px;   
  28.     }   
  29.     .pwd-strength-box-hi   
  30.     {   
  31.     color: #000000;   
  32.     background-color: #C0F000;   
  33.     width: 40px;   
  34.     }   
  35. </style>  
  36.   
  37.     <script type="text/javascript">  
  38.     /*   
  39.  函数名称：trim()   
  40.  函数功能: 去掉字符串的前后空格   
  41.  传入参数：字符串变量   
  42.  传出结果：去掉前后空格后的字符串   
  43. */   
  44. function trim(srcStr)   
  45. {   
  46.  var i,j,len;   
  47.   len=srcStr.length;   
  48.  for(i=0;i<len;i++)   
  49.   if(srcStr.charAt(i)!=' ') break;   
  50.  for(j=len-1;j>=i;j--)   
  51.   if(srcStr.charAt(j)!=' ') break;   
  52.  if(i>j)    
  53.   return "";   
  54.   else    
  55.   return srcStr.substr(i,j-i+1);   
  56. }   
  57. function $(obj)   
  58. {   
  59.     return document.getElementById(obj);   
  60. }   
  61. //检查密码等级   
  62. function checkpwdlevel(pwd)   
  63. {   
  64.     var objLow=document.getElementById("pwdLow");   
  65.     var objMed=document.getElementById("pwdMed");   
  66.     var objHi=document.getElementById("pwdHi");   
  67.     objLow.className="pwd-strength-box";   
  68.     objMed.className="pwd-strength-box";   
  69.     objHi.className="pwd-strength-box";   
  70.     if(pwd.length<6)   
  71.     {   
  72.         objLow.className="pwd-strength-box-low";   
  73.     }   
  74.     else   
  75.     {   
  76.         var p1= (pwd.search(/[a-zA-Z]/)!=-1) ? 1 : 0;   
  77.         var p2= (pwd.search(/[0-9]/)!=-1) ? 1 : 0;   
  78.         var p3= (pwd.search(/[^A-Za-z0-9_]/)!=-1) ? 1 : 0;   
  79.         var pa=p1+p2+p3;   
  80.         if(pa==1)   
  81.         {   
  82.             objLow.className="pwd-strength-box-low";   
  83.         }   
  84.         else if(pa==2)   
  85.         {   
  86.             objLow.className="pwd-strength-box-low";   
  87.             objMed.className="pwd-strength-box-med";   
  88.         }   
  89.         else if(pa==3)   
  90.         {   
  91.             objLow.className="pwd-strength-box-low";   
  92.             objMed.className="pwd-strength-box-med";   
  93.             objHi.className="pwd-strength-box-hi";   
  94.         }   
  95.     }   
  96. }   
  97.     </script>  
  98.   
  99. </head>  
  100. <body>  
  101.     <table width="100%" border="0" cellspacing="0">  
  102.         <tr>  
  103.             <td height="32" align="right" style="width: 83px">  
  104.                 密码：</td>  
  105.             <td align="left">  
  106.                 <input id="password" type="password" size="18" name="userpwd" runat="server" onkeyup="javascript:checkpwdlevel(this.value);"  
  107.                     class="register_input" /></td>  
  108.         </tr>  
  109.         <tr>  
  110.             <td height="32" align="right" style="width: 83px">  
  111.                 安全性等级：</td>  
  112.             <td align="left">  
  113.                 <table style="border-left: 1px solid #7CA001; border-top: 1px solid #7CA001; border-right: 1px solid #7CA001;   
  114.                     border-bottom: 1px solid #7CA001;" cellspacing="0" cellpadding="0" width="120px">  
  115.                     <tbody>  
  116.                         <tr>  
  117.                             <td class="pwd-strength-box" id="pwdLow" style="width: 40px; height: 16px" align="center"  
  118.                                 valign="bottom">  
  119.                                 弱</td>  
  120.                             <td class="pwd-strength-box" id="pwdMed" style="width: 40px; height: 16px" align="center"  
  121.                                 valign="bottom">  
  122.                                 中</td>  
  123.                             <td class="pwd-strength-box" id="pwdHi" style="width: 40px; height: 16px" align="center"  
  124.                                 valign="bottom">  
  125.                                 强</td>  
  126.                         </tr>  
  127.                     </tbody>  
  128.                 </table>  
  129.             </td>  
  130.         </tr>  
  131.     </table>  
  132. </body>  
  133. </html>  
faunjoe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现检查密码强度函数
猿小白的博客
06-20 1185
编写一个JS函数，基于如下规则确定给定密码的强度。
java实现的密码强度检测功能完整示例
08-25
主要介绍了java实现的密码强度检测功能,结合完整实例形式分析了java针对密码强度检测相关的字符串遍历、判断,以及输出密码强度等级相关操作技巧,需要的朋友可以参考下
js的密码强度验证
yang68668的博客
11-24 1899
<style> #box { width: 224px; display: flex; justify-content: space-between; } #box span { margin-top: 10px; width: 60px; height: 30px; .
漂亮的jsp密码强度检测
05-20
jsp密码强度检测jsp密码强度检测jsp密码强度检测
jsp注册里密码强弱怎么弄_js 验证密码强弱的小例子
weixin_33961375的博客
12-23 138
页面代码：弱中强样式：#pwdLever td{background-color:Gray;width:45px;text-align:center;}js代码：window.onload = function () {var textInput = document.getElementById("txtPwd");//给密码输入框 注册键放开事件textInput.onkeyup = func...
js密码强度判断
qq_18206513的博客
08-25 277
<script language=javascript> //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写 return 2;
密码强度检测算法分析及实现(JavaScript)案例说明
aide315的博客
03-19 1771
用正则表达式做用户密码强度的通过性判定，过于简单粗暴，不但用户体验差，而且用户帐号安全性也差。那么如何准确评价用户密码的强度，保护用户帐号安全呢？本文分析介绍了几种基于规则评分的密码强度检测算法，并给出了相应的演示程序。大家可以根据自己项目安全性需要，做最适合于自己的方案选择。方案 1 （简单）方案1算法通过密码构成分析，结合权重分派，统计得出密码强度得分。得分越高，表示密码强度越大，也就越安全。...
JavaScript密码强度在线检测
08-18
工作分享：因工作需要，纯手工写了一个JavaScript密码强度在线检测，分享出来，希望大家喜欢
JavaScript 密码强度判断代码
10-29
JavaScript 密码强度判断是一种常见的安全措施，用于确保用户创建的密码足够复杂，难以被破解。这段代码提供了一个简单的实现，通过分析输入的密码字符类型（数字、字母、特殊字符）和长度来评估其强度。 首先，...
基于jsp页面的密码强度效果的显示
12-31
基于jsp页面的密码强度效果的显示,很好用，很实际！
javascript密码强度检测
12-19
JavaScript密码强度检测通常涉及到以下几个方面： 1. **长度检查**：检查密码的长度，通常建议密码至少包含8个字符。更长的密码通常意味着更高的安全性。 2. **字符多样性**：检查密码是否包含大写字母、小写字母...
JavaScript动态检测密码强度原理及实现方法详解
10-16
首先，密码强度检测的基本原理是检查密码中包含的字符类型。通常，一个强密码应包含以下几种字符： 1. 数字（0-9） 2. 小写字母（a-z） 3. 大写字母（A-Z） 4. 特殊字符（如!@#$%^&*()） 根据这些字符类型，我们...
jsp注册里密码强弱怎么弄_js密码强度校验
weixin_42506752的博客
12-31 380
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能，在以前的文章中，我们曾经给出过一段检验密码强度的例子，今天再看一个与《js密码强度校验》的代码。效果：//CharMode函数//测试某个字符是属于哪一类.function CharMode(iN){if (iN>=48 && iN <=57) //数字return 1;if (iN>=65 &&a...
Java/JavaScript 双语言实现--密码强度检测--代码
一口一个大西瓜
09-25 427
工具介绍 公司在做认证系统时，由于安全需要，屏蔽掉弱密码，需要检测用户输入的密码强度。计算方法参考http://www.passwordmeter.com/ 的计算方法，但passwordmeter本身计算存在些许错误，且无java版本，后端无法对密码进行二次校验(后端不信任前端任何验证)。于是开发了这个密码强度检验函数。 校验函数通过100W随机密码测试，100W条数据中无一条错误，如果你...
【转载】JavaScript实现密码强度检测
weixin_33809981的博客
04-09 90
引用地址：http://www.klstudio.com/post/90.html JavaScript实现密码强度检测，已经提供了方法，实现非常简单。 HTML代码如下： <html><head><title>PasswordStrength</title><metahttp-equiv="Content-Type"content=...
仿google密码强度判断[xml,jsp]
岁寒松柏
09-21 2813
灵感来自GOOGLE--Gmail的注册表单，这是结合XMLHTTP和servlet以及客户端脚本Javascript来实现的一个给死板的表单程序增加亲和力的一个小玩意。 下午看到遂花了几小时模仿着写了一个。前端代码均来自GMAIL的表单注册那里，后段验证密码强度的servlet是自己做的，算法有待商戳不过效果算是出来了。 程序演示地址：http://club.gamvan.com/club/
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 482
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 638
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
jquery密码强度检测
04-02
以下是一个基本的jQuery密码强度检测代码： ```javascript $(document).ready(function(){ $('#password').keyup(function(){ var password = $(this).val(); var strength = 0; if (password.match(/[a-z]+/))...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值