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 select操作的日期联动实现代码
Dec 06 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
浅谈一个webpack构建速度优化误区
Jun 24 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 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获取当前所在目录位置的方法
2014/11/26 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
Python ZipFile模块详解
2013/11/01 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python定时截屏实现
2020/11/02 Python
如何用Django处理gzip数据流
2021/01/29 Python
scrapy-splash简单使用详解
2021/02/21 Python
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
安全检查管理制度
2014/02/02 职场文书
生产厂长岗位职责
2014/02/21 职场文书
环保宣传标语
2014/06/12 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
交通事故协议书范文
2014/10/23 职场文书
怎样写离婚协议书
2015/01/26 职场文书
西柏坡导游词
2015/02/05 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
学术会议领导致辞
2015/07/29 职场文书