密码强度检测效果实现原理与代码


Posted in Javascript onJanuary 04, 2013
<html> 
<head> 
<title>密码强度检测效果</title> 
<script type="text/javascript"> 
function chkpwd(obj){ 
var t=obj.value; 
var id=getResult(t); 
//定义对应的消息提示 
var msg=new Array(4); 
msg[0]="密码过短。"; 
msg[1]="密码强度差。"; 
msg[2]="密码强度良好。"; 
msg[3]="密码强度高。"; 
var sty=new Array(4); 
sty[0]=-45; 
sty[1]=-30; 
sty[2]=-15; 
sty[3]=0; 
var col = new Array(4); 
col[0] = "gray"; 
col[1] = "#50AEDD"; 
col[2] = "#FF8213"; 
col[3] = "green"; 
//设置显示效果 
var bImg="http://download.jz123.cn/sc/pwdlen_dSIPeEGQWxfO.gif" //一张显示用的图片 
var sWidth=300; 
var sHeight=15; 
var Bobj=document.getElementById("chkResult"); 
Bobj.style.fontSize="12px"; 
Bobj.style.color=col[id]; 
Bobj.style.width=sWidth + "px"; 
Bobj.style.height=sHeight + "px"; 
Bobj.style.lineHeight=sHeight + "px"; 
Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px"; 
Bobj.style.textIndent="20px"; 
Bobj.innerHTML="检测提示:" + msg[id]; 
} 
//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强 
function getResult(s){ 
if(s.length < 4){ 
return 0; 
} 
var ls = 0; 
if (s.match(/[a-z]/ig)){ 
ls++; 
} 
if (s.match(/[0-9]/ig)){ 
ls++; 
} 
if (s.match(/(.[^a-z0-9])/ig)){ 
ls++; 
} 
if (s.length < 6 && ls > 0){ 
ls--; 
} 
return ls 
} 
</script> 
</head> 
<body> 
告诉你一个应有尽有的网页特效网址:https://3water.com/list/list_43_1.htm
<form name="form1"> 
<label for="pwd">用户密码</label> 
<input type="password" name="pwd" onKeyUp="chkpwd(this)" /> 
<div id="chkResult"></div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
禁止你的左键复制实用技巧
Jan 04 #Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 #Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 #Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 #Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 #Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 #Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
js实现左右轮播图
2020/01/09 Javascript
Python with的用法
2014/08/22 Python
python开发之list操作实例分析
2016/02/22 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
三八妇女节活动主持词
2014/03/17 职场文书
员工辞职信范文
2015/03/02 职场文书
公司酒会致辞
2015/07/30 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python