前些天工作中有这个需求,自己手写了相关的JS代码,第一种方法是通过ASCII 码判断密码类型,完成用户注册时判断用户输入密码的强度,分强、弱、中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入,第二种方法是通过JS正则来判断用户输入的密码强弱。下面分别对这两种方法进行展示。

方法一:

html代码:

<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td id="pwd_Weak" class="pwd pwd_c">&nbsp;</td>
<td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
<td id="pwd_Strong" class="pwd pwd_c pwd_c_r">&nbsp;</td>
</tr>
</table>

css代码:

    <style type="text/css">
.pwd{width:40px;height:20px;line-height:14px;padding-top:2px;}
.pwd_f{color:#BBBBBB;}
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}
.pwd_c_r{border-right:1px solid #D0D0D0;}
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;}
.pwd_Medium_c_r{border-right:1px solid #E9AE10;}
.pwd_Strong_c_r{border-right:1px solid #267A12;}
</style>

到关键了!JS判断:

<script type="text/javascript">
function CheckIntensity(pwd){
//判断输入密码的类型
var Mcolor,Wcolor,Scolor,Color_Html;
var m=0;
var Modes=0;
for(i=0; i<pwd.length; i++){
var charType=0;
var t=pwd.charCodeAt(i);
if(t>=48 && t <=57){charType=1;} //为0~9十个阿拉伯数字
else if(t>=65 && t <=90){charType=2;} //为26个大写英文字母
else if(t>=97 && t <=122){charType=4;} //为26个小写英文字母
else{charType=4;}
Modes |= charType;
}
//计算密码模式
for(i=0;i<4;i++){
if(Modes & 1){m++;alert(m)}
Modes>>>=1;
}
if(pwd.length<=4){m=1;}
if(pwd.length<=0){m=0;}
//返回强度级别
switch(m){
case 1 :
Wcolor="pwd pwd_Weak_c";
Mcolor="pwd pwd_c";
Scolor="pwd pwd_c pwd_c_r";
Color_Html="弱"; break;
case 2 :
Wcolor="pwd pwd_Medium_c";
Mcolor="pwd pwd_Medium_c";
Scolor="pwd pwd_c pwd_c_r";
Color_Html="中"; break;
case 3 :
Wcolor="pwd pwd_Strong_c";
Mcolor="pwd pwd_Strong_c";
Scolor="pwd pwd_Strong_c pwd_Strong_c_r";
Color_Html="强"; break;
default :
Wcolor="pwd pwd_c";
Mcolor="pwd pwd_c pwd_f";
Scolor="pwd pwd_c pwd_c_r";
Color_Html="无";
break;
}
document.getElementById('pwd_Weak').className=Wcolor;
document.getElementById('pwd_Medium').className=Mcolor;
document.getElementById('pwd_Strong').className=Scolor;
document.getElementById('pwd_Medium').innerHTML=Color_Html;
}
</script>

方法二:

<script>
function AuthPasswd(string) {
if(string.length >=6) {
if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
noticeAssign(1);
}else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
noticeAssign(-1);
}else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
noticeAssign(-1);
}else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
noticeAssign(-1);
}else{
noticeAssign(0);
}
}
}else{
noticeAssign(null);
}
} function noticeAssign(num) {
if(num == 1) {
$('#weak').css({backgroundColor:'#009900'});
$('#middle').css({backgroundColor:'#009900'});
$('#strength').css({backgroundColor:'#009900'});
$('#strength').html('很强');
$('#middle').html('');
$('#weak').html('');
}else if(num == -1){
$('#weak').css({backgroundColor:'#ffcc33'});
$('#middle').css({backgroundColor:'#ffcc33'});
$('#strength').css({backgroundColor:''});
$('#weak').html('');
$('#middle').html('中');
$('#strength').html('');
}else if(num ==0) {
$('#weak').css({backgroundColor:'#dd0000'});
$('#middle').css({backgroundColor:''});
$('#strength').css({backgroundColor:''});
$('#weak').html('弱');
$('#middle').html('');
$('#strength').html('');
}else{
$('#weak').html('&nbsp;');
$('#middle').html('&nbsp;');
$('#strength').html('&nbsp;');
$('#weak').css({backgroundColor:''});
$('#middle').css({backgroundColor:''});
$('#strength').css({backgroundColor:''});
}
}
</script>

原生JS判断密码强弱的更多相关文章

  1. Js判断密码强度并显示提示信息

    用javascipt实现的Ajax判断密码强弱的功能,大多数有用户注册功能的网站,都会有这么一个功能,作为WEB程序员,应该会写这种小模块哦,不懂的就看下这个例子,觉得挺简单,当初帮助了不少人学会了密 ...

  2. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  3. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  4. js判断密码强度是否符合

    /** 判断密码强度是否符合 */ function check_passwd_intensity(password) { value = $.trim(password); if( value.le ...

  5. js判断密码强度

    html代码: <form name="form1" action=""> 密码:<input type="password&quo ...

  6. 原生js记住密码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 利用原生JS判断组合键

    <script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...

  8. js验证密码强弱

    JS密码强度验证 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. js判断类型为数字的方法实现总汇——原生js判断isNumber()

    方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...

随机推荐

  1. WindowsPhone 8 开发 之 本地数据库应用

    微软提供的有一个本地数据库的例子 http://code.msdn.microsoft.com/wpapps/Local-Database-Sample-57b1614c 可以进行参照. 里边最核心的 ...

  2. 导航软件 CH Round #57 - Story of the OI Class

    题目:http://ch.ezoj.tk/contest/CH%20Round%20%2357%20-%20Story%20of%20the%20OI%20Class/导航软件 题解:刚开始看见题目, ...

  3. ♫【Git】

    git - 简易指南 (√) fatal:remote error:You can't push to git://github.com/username/*.git  (√) git clone g ...

  4. 【转】Android--多线程之Handler--不错

    原文网址:http://www.cnblogs.com/plokmju/p/android_handler.html 前言 Android的消息传递机制是另外一种形式的“事件处理”,这种机制主要是为了 ...

  5. WebSorcket学习

    传统 Web 模式在处理高并发及实时性需求的时候经常采用以下方案: 1.轮询,原理简单易懂,就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求,来保持客户端和服务器端的数据同步.问题很明显, ...

  6. codeforces --- 115A

    A. Party time limit per test 3 seconds memory limit per test 256 megabytes input standard input outp ...

  7. oracle 简单SQL

    1, insert into test select * from test;(造测试数据) 2, create table b as select * from a; (创建表结构一样的空表,数据可 ...

  8. Apache 一台主机绑定多个域名及虚拟主机

    今天研究了下Apache下如何使用一台主机绑定多个域名且使用80端口.说白了就是在一台主机上运行多个网站,并且网站域名都是使用的80端口. 具体方法如下: 1.进入Apache conf目录,找到ht ...

  9. Android学习之 sildingmenu

    仿SlidingMenu Android抽屉菜单效果drawer menu - appdoll.com Android "多方向"抽屉 - 开源中国社区 自定义Android滑动式 ...

  10. myeclipse svn

    打开myeclipse的help---install from site 点击add弹出对话框 在输入框中输入对应内容 http://subclipse.tigris.org/update_1.10. ...