JavaScript动态检测密码强度原理及实现方法详解_javascript技巧

来源:脚本之家  责任编辑:小易  

楼主是不是想问,点击编辑框后,然后关闭浏览器的时候有类似这样的提示“有修改内容是否保存再关闭”。如果是这样就要使用窗口的onbeforeunpload事件:window.onbeforeunload=function(e){return '有修改内容是否保存再关闭?';}www.zgxue.com防采集请勿采集本网。

本文实例讲述了JavaScript动态检测密码强度原理及实现方法。分享给大家供大家参考,具体如下:

function checkPass() { var pass=document.getElementById('pass').value;if(pass='tiger'){ alert('密码正确!');} else{ alert('密码错误!');} } 另:

在注册账户,设置密码时,会出现密码强度动态检测,网上看了一些帖子,大多只写了具体的实现过程,而没有对原理的分析过程。下面着重讲一下其原理。

时钟特效 javascript\"> function disptime(){ var today=new Date();获得当前时间 var hh=today.getHours();获得小时、分钟、秒 var mm=today.getMinutes();var ss=today.

原理分析

/创建script标签 var myScript=document.createElement('script') 添加加载完成的事件监听 myScript.addEventListener('load',(e)=>{ console.log('加载完成') }) 这是要动态加载的文件路径

通常实现密码强度动态判断有两种方案实现: 正则。但其效率低一点,难度也大一些。 字符串,函数和运算符。

你可以在用户提交时,由一个函数来验证 你可以在用户输入完后,调用一个函数来验证

这里用第二种方案,但是如何判断一个密码串是强还是弱呢?

是不是iframe?如果是iframe 如果你生成的iframe只有1个 按照你的说法 那么首先需要写一个方法 function getTxtValue(){ var txtValue=\";获得所有iframe标签 var ifs=document.getElementsByTagName(

一般我们的密码会设置为数字、字母(大小写)、特殊符号三类。 强:密码串包含其中三种或以上 中:密码串包含其中两种 弱:密码串包含其中一种

字符类型 二进制表示 ASCII
数字 0001 48~57
小写字母 0010 97~122
大写字母 0100 65~90
特殊字符 1000 其他

如有一些字符串:

字符串 二进制表示 十进制
5972 0001 || 0001 || 0001 || 0001 0001 —> 1
boa 0010 || 0010 || 0010 0010 —> 2
AOPA 0100 || 0100 || 0100 || 0100 0100 —> 4
@!_$# 1000 || 1000 || 1000 || 1000 || 1000 1000 —> 8
12ab(2种) 0001 || 0001 || 0010 || 0010 0011—> 3
12Ab(3种) 0001 || 0001 || 0100 || 0010 0111—> 7
1_Ab(4种) 0001 || 1000 || 0100 || 0010 1111—> 15

也就是4位二进制数,1的个数越多,密码强度越大,四盏灯,亮的个数越多,照的越亮。

把1的个数转换为强度:

循环4次,每次和1做“位与”运算。如果得到真,那么强度等级+1,否则不加。每循环完一次,移位操作一次。

如A3cd:0111

第一次:0111 & 1 = 1; level = 1; 右移一位,0011

第二次:0011 & 1 = 1; levle = 2; 右移一位,0001

第三次:0001 & 1 = 1; level = 3; 右移一位,0000

第四次:0000 & 1 = 0; level = 3; 右移一位,0000

level为3,是强密码。

代码实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>www.zgxue.com 密码强度检测</title> </head> <style type="text/css"> .default {background: #eeeeee;} .weak {background: #FF0000;} .medium {background: #FF9900;} .strong {background: #33CC00;} input {height: 20px; line-height: 20px;width: 210px;} span {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;} </style> <script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('pwd'); oInput.value = ''; var spans = document.getElementsByTagName('span'); oInput.onkeyup = function(){ //强度状态设为默认 spans[0].className = spans[1].className = spans[2].className = "default"; var pwd = this.value; var result = 0; for(var i = 0, len = pwd.length; i < len; ++i){ result |= charType(pwd.charCodeAt(i)); } var level = 0; //对result进行四次循环,计算其level for(var i = 0; i <= 4; i++){ if(result & 1){ level ++; } //右移一位 result = result >>> 1; } if(pwd.length >= 6){ switch (level) { case 1: spans[0].className = "weak"; break; case 2: spans[0].className = "medium"; spans[1].className = "medium"; break; case 3: case 4: spans[0].className = "strong"; spans[1].className = "strong"; spans[2].className = "strong"; break; } } } } /* 定义一个函数,对给定的数分为四类(判断密码类型),返回十进制1,2,4,8 数字 0001 -->1 48~57 小写字母 0010 -->2 97~122 大写字母 0100 -->4 65~90 特殊 1000 --> 8 其它 */ function charType(num){ if(num >= 48 && num <= 57){ return 1; } if (num >= 97 && num <= 122) { return 2; } if (num >= 65 && num <= 90) { return 4; } return 8; } </script> <body> <label for="">请输入密码:</label><input id ='pwd' type="text" name="pwd" /><br> <label for="">密 码 强 度:</label><span>弱</span><span>中</span><span>强</span> </body></html>

运行效果

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

PS:这里再为大家提供几款相关在线工具供大家参考使用:

密码安全性在线检测:

http://tools.jb51.net/password/my_password_safe

在线随机数字/字符串生成工具:

http://tools.jb51.net/aideddesign/suijishu

高强度密码生成器:

http://tools.jb51.net/password/CreateStrongPassword

JavaScript正则表达式在线测试工具:

http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:

http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

给table加个ID文章标题显示中文章标题已结束jsfunction ReadTable(){("#table01").find("tr").each(function(index,element){if($(this).children("td").eq(1).text()="已结束"){(this).hide();}})}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript密码强度校验代码(两种方法)
  • js 密码强度验证(兼容ie,火狐,谷歌)
  • js检验密码强度(低中高)附图
  • js检测用户输入密码强度
  • js正则表达式验证密码强度【推荐】
  • 用于判断用户注册时,密码强度的js代码
  • js在客户端验证密码强度,兼容firefox和ie
  • javascript 密码强度判断代码
  • js密码强度校验
  • javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
  • js实现的四级密码强度检测功能示例
  • js实现密码强度检测【附示例】
  • js手动播放图片实现图片轮播效果
  • 浅谈javascript的call()、apply()、bind()的用法
  • 浅谈react前后端同构防止重复渲染
  • 解决react native端口号修改的方法
  • javascript清空数组元素的两种方法简单比较
  • javascript优化技巧之短路表达式详细介绍
  • react native 混合开发多入口加载方式详解
  • javascript 支持链式调用的异步调用框架async.operation
  • javascript iframe中打开文件,并检测iframe存在否
  • js definesetter -给js的 "class"自动增加一个set的属
  • javascript 动态输入表格的数据 rows能检测到吗
  • javascript如何检测网页是否被编辑
  • Javascript中用户登录的检测,其中userTip是什么?
  • JavaScript 机试时如何检测代码结果
  • 制作一个密码检测的javascript程序,能够判断输入的密码是否等于"tiger"
  • javascript动态显示时间
  • javascript脚本动态加载时如何检测加载完成
  • javascript 检测代码是干什么用的 怎么用啊 求指教额(⊙o⊙)…
  • javascript 如何获取动态的ifrname
  • 要如何用JavaScript来检测电话号码必须为数字呢??
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript正则表达式技巧大全javascript替换操作技巧总结javascript查找算法技巧总结javascript数据结构与算法技巧总结javascript遍历算法与技巧总结javascript中json操作技巧总结javascript错误与调试技巧总结javascript数学运算用法总结javascript密码强度校验代码(两种方法)js 密码强度验证(兼容ie,火狐,谷歌)js检验密码强度(低中高)附图js检测用户输入密码强度js正则表达式验证密码强度【推荐】用于判断用户注册时,密码强度的js代码js在客户端验证密码强度,兼容firefox和iejavascript 密码强度判断代码js密码强度校验javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)js实现的四级密码强度检测功能示例js实现密码强度检测【附示例】js手动播放图片实现图片轮播效果浅谈javascript的call()、apply()、bind()的用法浅谈react前后端同构防止重复渲染解决react native端口号修改的方法javascript清空数组元素的两种方法简单比较javascript优化技巧之短路表达式详细介绍react native 混合开发多入口加载方式详解javascript 支持链式调用的异步调用框架async.operationjavascript iframe中打开文件,并检测iframe存在否js definesetter -给js的 "class"自动增加一个set的属js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包微信小程序修改checkbox的样式代码实例使用gulp构建前端自动化的方法示例javascript监测activex控件是否已经安装过js中的多态实例详解h5移动端适配 flexible方案javascript 获取网页标题js局部刷新页面时间具体实现js 导出table内容到excel的简单实例如何为你的js项目添加智能提示与类型检查javascript获取flash对象与网上的有所不同
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved