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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
node下使用UglifyJS压缩合并JS文件的方法
Mar 07 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php微信支付接口开发程序
2016/08/02 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery中的常用事件总结
2009/12/27 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
layui table 参数设置方法
2018/08/14 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
数学系个人求职信范文
2014/01/30 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
mysql 排序失效
2022/05/20 MySQL