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 学习笔记 选择器之六
Jul 23 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 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
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
bootstrap table实例详解
2017/01/06 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python可视化text()函数使用详解
2020/02/11 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
高中生逃课检讨书
2014/10/10 职场文书
普通党员个人整改措施
2014/10/27 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
反邪教学习心得体会
2016/01/15 职场文书