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 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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
PHPlet在Windows下的安装
2006/10/09 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python3实现随机数
2018/06/25 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
详解Python 函数如何重载?
2019/04/23 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python高级特性简介
2020/08/13 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
学生会主席事迹材料
2014/01/28 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
体育委员竞选稿
2015/11/21 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书