JS 密码强度验证(兼容IE,火狐,谷歌)


Posted in Javascript onMarch 15, 2010

大概样式: 

JS 密码强度验证(兼容IE,火狐,谷歌)
源码:

//=================HTML页面================= 
<body onload="InitCss();"> 
<form> 
<div> 
<table> 
<tr> 
<td> 
密码: 
</td> 
<td> 
<input id="txtPassword" type="password" style="width: 130px;" maxlength="16" onfocus="InitCss();" 
onblur="ValidateInput('password',this.value)" onkeydown="validatePwdStrong(this.value);" /> 
</td> 
<td> 
<div id="tipPosition"> 
</div> 
</td> 
</tr> 
<tr> 
<td> 
</td> 
<td> 
<table id="pwdStrong_color"> 
<tr> 
<td id="pwdStrong_1"> 
</td> 
<td id="pwdStrong_2"> 
</td> 
<td id="pwdStrong_3"> 
</td> 
<td id="pwdStrong_4"> 
</td> 
</tr> 
</table> 
</td> 
<td> 
<div id="pwdStrong_text"> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body>

JS文件
//使用$替换document.getElementById函数 
var $ = function(v) { return document.getElementById(v); } /******************************************************验证用户输入******************************************************/ 
function ValidateInput(element, value) { 
//验证密码 
if (element == "password") { 
if (value.toString().length < 6) { 
$('tipPosition').className = 'error'; 
$('tipPosition').innerHTML = "密码设置错误。密码长度过小。"; 
return; 
} 
else { 
$('tipPosition').className = 'success'; 
$('tipPosition').innerHTML = "填写正确。"; 
} 
} 
} 
/*================================密码验证JS =========== Begin=======================================*/ 
//密码初始化的样式 
function InitCss() { 
$('tipPosition').className = 'tip'; 
$('tipPosition').innerHTML = "最小长度:6。 最大长度:16。"; 
} 
/*================================密码强度 ===========Begin=======================================*/ 
function Evaluate(word) { 
return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5,}|(.)+$/g, "$1$2$3$4$5").length; 
} 
function validatePwdStrong(value) { 
var pwd = { 
color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', '#246626'], 
text: ['太短', '弱', '一般', '很好', '极佳'] 
}; 
function colorInit() { 
$('pwdStrong_1').style.backgroundColor = pwd.color[0]; 
$('pwdStrong_2').style.backgroundColor = pwd.color[0]; 
$('pwdStrong_3').style.backgroundColor = pwd.color[0]; 
$('pwdStrong_4').style.backgroundColor = pwd.color[0]; 
} 
if (Evaluate(value) == 1) { 
colorInit(); 
$('pwdStrong_1').style.backgroundColor = pwd.color[1]; 
$('pwdStrong_text').innerHTML = pwd.text[1]; 
$('pwdStrong_text').style.color = pwd.color[1]; 
} 
else if (Evaluate(value) == 2) { 
colorInit(); 
$('pwdStrong_1').style.backgroundColor = pwd.color[2]; 
$('pwdStrong_2').style.backgroundColor = pwd.color[2]; 
$('pwdStrong_text').innerHTML = pwd.text[2]; 
$('pwdStrong_text').style.color = pwd.color[2]; 
} 
else if (Evaluate(value) == 3) { 
colorInit(); 
$('pwdStrong_1').style.backgroundColor = pwd.color[3]; 
$('pwdStrong_2').style.backgroundColor = pwd.color[3]; 
$('pwdStrong_3').style.backgroundColor = pwd.color[3]; 
$('pwdStrong_text').innerHTML = pwd.text[3]; 
$('pwdStrong_text').style.color = pwd.color[3]; 
} 
else if (Evaluate(value) == 4) { 
$('pwdStrong_1').style.backgroundColor = pwd.color[4]; 
$('pwdStrong_2').style.backgroundColor = pwd.color[4]; 
$('pwdStrong_3').style.backgroundColor = pwd.color[4]; 
$('pwdStrong_4').style.backgroundColor = pwd.color[4]; 
$('pwdStrong_text').innerHTML = pwd.text[4]; 
$('pwdStrong_text').style.color = pwd.color[4]; 
} 
}

//=================CSS文件=================

body 
{ 
font: 13px 宋体; 
} 
/*密码验证提示CSS --------------------------------开始--------------------------------*/ 
#tipPosition 
{ 
width: 400px; 
height: 16px; 
line-height: 18px; 
padding: 2px 30px; 
} 
.tip 
{ 
background: #E6F2FF url(images/register_tip.png) no-repeat 10px center; 
border: 1px #0E5863 dashed; 
color: #0E5863; 
} 
.error 
{ 
background: #FBECDF url(images/register_error.png) no-repeat 10px center; 
border: 1px Red dashed; 
color: #6D3737; 
} 
.success 
{ 
background: #D6FCD2 url(images/register_success.png) no-repeat 10px center; 
border: 1px #2F5D36 dashed; 
color: #3D934A; 
} 
/*密码强度CSS --------------------------------开始--------------------------------*/ 
#pwdStrong_color 
{ 
width: 136px; 
height: 3px; 
border: 0px; 
border-collapse: collapse; 
border-spacing: 0; 
background: #E6EAED; 
margin-top: 5px; 
} 
#pwdStrong_color td 
{ 
padding: 0px; 
width: 44px; /*如不加td宽度,Google的Chrome不会正常显示*/ 
} 
#pwdStrong_text 
{ 
font: 12px 宋体; 
}
Javascript 相关文章推荐
一些技巧性实用js代码小结
Oct 14 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
jQuery聚合函数实例
May 21 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JavaScript表单验证实现代码
May 22 Javascript
Angular 数据请求的实现方法
May 07 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
javascript css styleFloat和cssFloat
Mar 15 #Javascript
javascript 嵌套的函数(作用域链)
Mar 15 #Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 #Javascript
JQuery 常用操作代码
Mar 14 #Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 #Javascript
Jquery cookie操作代码
Mar 14 #Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
document.getElementById介绍
2011/09/13 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
详解vue 项目白屏解决方案
2018/10/31 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
pygame实现简易飞机大战
2018/09/11 Python
python实现归并排序算法
2018/11/22 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
中文专业求职信
2014/06/20 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
学生会干部任命书
2015/09/21 职场文书