密码强度应用(js)
<!-- 密码强度div -->
<div id="tips" class="help-block">
<b class="fl">密码强度:</b><span></span><span></span><span></span>
</div>
<script type="text/javascript">
$(function(){
//开始的时候隐藏
$('#tips').hide();
});
//验证密码强度
window.onload = function() {
//var oTips = document.getElementById("tips");
var oTips = $('#tips').get(0);
//var oInput = document.getElementsByTagName("input")[0];
var oInput = $('#password').get(0);
var aSpan = oTips.getElementsByTagName("span");
//var aSpan = $("#tips span");
//alert(aSpan);
var aStr = ["弱", "中", "强", "非常好"];
var i = 0;
oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
var index = checkStrong(this.value);
//this.className = index ? "correct" : "error";
oTips.className = "s" + index;
for ( i = 0; i < aSpan.length; i++)
aSpan[i].className = aSpan[i].innerHTML = "";
if(index==3){
index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
index && (aSpan[index - 3].className = "active", aSpan[index - 3].innerHTML = aStr[index - 3]);
}else if(index==2){
index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
index && (aSpan[index - 2].className = "active", aSpan[index - 2].innerHTML = aStr[index - 2]);
}else if(index==1){
index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1]);
}
if($('#tips').parent().parent().hasClass('error')){
$('#tips').hide();
}else if($('#password').val().length>=6){
$('#tips').show();
}
};
};
/** 强度规则
+ ------------------------------------------------------- +
1) 任何少于6个字符的组合,弱;任何字符数的同类字符组合,弱;
2) 任何字符数的两类字符组合,中;
3) 12位字符数以下的三类或四类字符组合,强;
4) 12位字符数以上的三类或四类字符组合,非常好。
+ ------------------------------------------------------- +
**/
//检测密码强度
function checkStrong(sValue) {
var modes = 0;
if (sValue.length < 6)
return modes;
//数字
if (/\d/.test(sValue))
modes++; //字母
if(/[a-zA-Z]/.test(sValue))
modes++;
//特殊字符
if (/\W/.test(sValue))
modes++;
switch (modes) {
case 1:
return 1;
break;
case 2:
return 2;
break;
case 3:
return 3;
break;
}
}
</script>
密码强度应用(js)的更多相关文章
- 密码强度的js插件(完成)
效果如下图: 低:
- jquery实现密码强度检测
jquery实现密码强度验证 jquery实现密码强度验证 JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp( ...
- JS正则检测密码强度
今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /* * 检测密码复杂度 */ function ...
- js判断密码强度
html代码: <form name="form1" action=""> 密码:<input type="password&quo ...
- js动态判断密码强度&&实用的 jQuery 代码片段
// 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- js 检验密码强度
html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=&quo ...
- js实现密码强度验证
<html> <head> <meta http-equiv="content-type" content="text/html" ...
- 正则表达式之js检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
- 【javascript】js 检验密码强度
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...
随机推荐
- tencent://message协议
tencent://message协议 |举报|字号 订阅 相信很多朋友在访问别人的博客.网上商城时可能会发现上都有这样的小玩意, 点击下就可以弹出对话框和主人进行对话,而且无需加对方为好友. ...
- Ejabberd源码解析前奏--管理
一.ejabberdctl 使用ejabberdctl命令行管理脚本,你可以执行ejabberdctl命令和一些普通的ejabberd命令(后面会详细解说).这意味着你可以在一个本地或远程ejabbe ...
- Jabber/XMPP协议与架构
一.概述 由Jeremie Miller于1998年开始这个项目.Jabber是一个开放源码形式组织产生的网络实时通信协议,第一个公开版本于2000年5月发行.Jabber已经由IETF XMPP协议 ...
- [转] c#中 多线程访问winform控件
原文 c#中多线程访问winform控件的若干问题小结 我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来解决这个问题,下面我将详细的 ...
- vim简单使用教程
vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...
- Android的SoundPool
开发Android软件中我们可能经常需播放多媒体声音文件,一般使用MediaPlayer类但该类占用资源较多,对于游戏等应用可能不是很适合,SoundPool类在SDK的android.media.S ...
- 教你利用iframe在网页中显示天气
来源:http://www.ido321.com/921.html css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{borde ...
- C语言相关图书推荐
C Primer Plus(第5版 中文版) 作 者 [美] 普拉塔(Prata S.) 著:云巅工作室 编 出 版 社 人民邮电出版社 出版时间 2005-02-01 版 次 1 ...
- android判断当前网络状态及跳转到设置界面
今天,想做这个跳转到网络设置界面, 刚开始用 intent = new Intent(Settings.ACTION_WIRELESS_SETTINGS); 不料老是出现settings.Wirele ...
- C++ 之高效使用STL ( STL 算法分类)
http://blog.csdn.net/zhoukuo1981/article/details/3452118