您的位置:首页 > Web前端 > JavaScript

检测密码强度的js脚本(改编)

2015-03-03 12:28 375 查看
1.有时候在用户注册或是修改密码的时候需要用到密码的强度检测.已达到更安全,和提高用户体验度的效果

html部分:

<div class="lineboxname"><span></span> New Password:</div>
<div class="lineboxinput" style="width:590px;">
<input type="password" id="password" name="password"/>
</div>
<div class="pwdstrength_default" id='pwdLevel_1' style="margin-left:19px;"> </div>
<div class="pwdstrength_default" id='pwdLevel_2'> </div>
<div class="pwdstrength_default" id='pwdLevel_3' > </div>
<div class="pwdstrength_description" style="clear:left;margin-left:190px;"> 弱</div>
<div class="pwdstrength_description"> 中</div>
<div class="pwdstrength_description"> 强</div>

css部分:
/*以下为密码强度的css样式*/
.pwdstrength_default{float:left;background:#d6d3d3;width:62px;height:4px;margin-top:5px;_margin-top:0px;margin-left:5px;_height:2px;font-size:0px;}
.pwdstrength_description{float:left;width:62px;margin-left:5px;text-align:center;color:#b0adad;font-size:12px;line-height:16px;}
.pwdstrength_weak{float:left;background:#ff3300;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}
.pwdstrength_medium{float:left;background: #099;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}
.pwdstrength_tough{float:left;background: #060;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}(当然根据前端人员编写的样式的不同,细节样式需要更改)
js文件部分:

$(function(){
$('#password').keyup(function () {
var __th = $(this);

if (!__th.val()) {
Primary();
return;
}
if (__th.val().length < 6) {
Weak();
return;
}
var _r = checkPassword(__th);
if (_r < 1) {
Primary();
return;
}

if (_r > 0 && _r < 2) {
Weak();
} else if (_r >= 2 && _r < 4) {
Medium();
} else if (_r >= 4) {
Tough();
}
});
function Primary() {
$('#pwdLevel_1').attr('class', 'pwdstrength_default');
$('#pwdLevel_2').attr('class', 'pwdstrength_default');
$('#pwdLevel_3').attr('class', 'pwdstrength_default');
}
function Weak() {
$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
$('#pwdLevel_2').attr('class', 'pwdstrength_default');
$('#pwdLevel_3').attr('class', 'pwdstrength_default');
}
function Medium() {
$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
$('#pwdLevel_2').attr('class', 'pwdstrength_medium');
$('#pwdLevel_3').attr('class', 'pwdstrength_default');
}
function Tough() {
$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
$('#pwdLevel_2').attr('class', 'pwdstrength_medium');
$('#pwdLevel_3').attr('class', 'pwdstrength_tough');
}
function checkPassword(pwdinput) {
var str = $(pwdinput).val();
var len = str.length;

var cat = /.{16}/g;
if (len == 0) return 1;
if (len > 16) { $(pwdinput).val(str.match(cat)[0]); }
cat = /.*[\u4e00-\u9fa5]+.*$/;
if (cat.test(str)) {
return -1;
}
cat = /\d/;
var maths = cat.test(str);
cat = /[a-z]/;
var smalls = cat.test(str);
cat = /[A-Z]/;
var bigs = cat.test(str);
var corps = corpses(pwdinput);
var num = maths + smalls + bigs + corps;

if (len < 6) { return 1; }

if (len >= 6 && len <= 8) {
if (num == 1) return 1;
if (num == 2 || num == 3) return 2;
if (num == 4) return 3;
}

if (len > 8 && len <= 11) {
if (num == 1) return 2;
if (num == 2) return 3;
if (num == 3) return 4;
if (num == 4) return 5;
}

if (len > 11) {
if (num == 1) return 3;
if (num == 2) return 4;
if (num > 2) return 5;
}
}

function corpses(pwdinput) {
var cat = /./g;
var str = $(pwdinput).val();
var sz = str.match(cat);
for (var i = 0; i < sz.length; i++) {
cat = /\d/;
maths_01 = cat.test(sz[i]);
cat = /[a-z]/;
smalls_01 = cat.test(sz[i]);
cat = /[A-Z]/;
bigs_01 = cat.test(sz[i]);
if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
}
return false;
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: