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


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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JS重要知识点小结
Nov 06 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
fastadmin中调用js的方法
May 14 Javascript
详解微信UnionID作用
May 15 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 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 array操作10个小技巧分享
2011/06/23 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
聊一聊JS中的prototype
2016/09/29 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Python信息抽取之乱码解决办法
2017/06/29 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
对python中的pop函数和append函数详解
2018/05/04 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python语言进阶知识点总结
2019/05/28 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python读取mysql数据绘制条形图
2020/03/25 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
详解KMP算法以及python如何实现
2020/09/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
财务助理岗位职责
2013/11/10 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
销售总经理岗位职责
2014/03/15 职场文书
比赛口号大全
2014/06/10 职场文书
授权委托书
2015/01/28 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
公司年夜饭通知
2015/04/25 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
PyTorch device与cuda.device用法
2022/04/03 Python