js检验密码强度(低中高)附图
最近一直在做通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。今天就把做的效果给大家分享下，代码没有网上搜索的那么复杂，能够满足一般的需求。
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>密码强度</title>
<style type="text/css">
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
.strengthLv1{background:red;height:6px;width:40px;}
.strengthLv2{background:orange;height:6px;width:80px;}
.strengthLv3{background:green;height:6px;width:120px;}
</style>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div class="pass-wrap">
<em>密码强度：</em>
<div id="passStrength"></div>
</div>
</body>
</html>
<script type="text/javascript" src="js/passwordStrength.js"></script>
<script type="text/javascript">
new PasswordStrength('pass','passStrength');
</script>
function PasswordStrength(passwordID,strengthID){
this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength(this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID);
var div = document.createElement('div');
var strong = document.createElement('strong');
this.oStrength = id.appendChild(div);
this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength = function (val){
var aLvTxt = ['','低','中','高'];
var lv = 0;
if(val.match(/[a-z]/g)){lv++;}
if(val.match(/[0-9]/g)){lv++;}
if(val.match(/(.[^a-z0-9])/g)){lv++;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3;}
this.oStrength.className = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
效果图： 
使用说明：
1、对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id。
2、checkStrength 方法中可以自定义密码强度的规则。
3、密码强度显示低中高分别对应 3 个 css 样式（strengthLv1、strengthLv2、strengthLv3）。
相关推荐
-
js密码强度实时检测代码
密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的. 密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作. 首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条. <div class="vali_pass"> <h3>简单的密码强度检测</h3> <input type=
-
JS 密码强度验证(兼容IE,火狐,谷歌)
大概样式: 源码: 复制代码 代码如下: //=================HTML页面================= <body onload="InitCss();"> <form> <div> <table> <tr> <td> 密码: </td> <td> <input id="txtPassword" type="password&quo
-
javascript密码强度校验代码（两种方法）
先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur
-
js在客户端验证密码强度，兼容FireFox和IE
function EvaluatePassword(word) { if (word == "") { return 0; } else if (word.length [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 改成这样的也行-- 密码: function ck(t){ n.innerText=/(?:^(w)1{0,8}$)|^(?:(0?1?2?3?4?5?6?7?8?9?0?)2?$)|^w{0,6}$/i.test(t)?'太简单了':'还行吧'; } [Ct
-
js检测用户输入密码强度
一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效
-
Js密码强度实时验证代码
效果图:演示代码: 密码强度测试 //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN =65 && iN =97 && iN >>=1; } return modes; } //checkStrong函数 //返回密码的强度级别 function checkStrong(sPW){ if (sPW.length 输入密码: 密码强度: 弱 中 强 [Ctr
-
用于判断用户注册时，密码强度的JS代码
<script language=javascript> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122) //小写 return 4; else retu
-
javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）
前言: 密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则.现在需要升级密码强度的验证,以前的验证比较简单,现在已经不能满足需求了,现在需要可灵活变化并有多级别可配置选择的一个密码强度验证,所以就设计了下面这个东东.在设计前也参考了下比较成熟的强度规则,大同小异,不外乎都采取了打分的机制来控制密码强度规则,这样可配置性高,灵活.本来想直接拿来用的,但是发现都比较旧,有些不太适宜公司开发的需求,可能这个东西比较简单吧,所以也没什么人去更新和写新的代码,所以还是自己动手设计了规则和写了
-
JavaScript注册时密码强度校验代码
密码强度有4个状态,分别如下图. 无密码状态 密码低级状态 密码中级状态 密码高级状态 实现的代码主要如下: HTML代码 <input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)"> <table border="0" cellpadding="0" cellspacing="0&quo
-
JavaScript 密码强度判断代码
复制代码 代码如下: <script type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122)