先说规则:
密码可输入类型(字符,字母大写,字母小写,特殊字符)。
基础分为,密码长度,一个长度为一分,大于18个字符都为18分;密码里面包含一种可输入类型,基础分加4分。
加分为,一种密码可输入类型的总数量大于等于2个,加分2分,如果总数量大于等于5,加分4分。
减分为,如果有连续重复的单个种类字符,则重复一次减1分。
总分50分。
0~10分:弱
11~20分:一般
21~30分:很好
31~50分:极佳
界面是仿GOOGLE得验证做得。
//以下是密码强度校验
ratingMsgs = new Array(5);
ratingMsgColors = new Array(5);
barColors = new Array(5);
ratingMsgs[0] = "太短";
ratingMsgs[1] = "弱";
ratingMsgs[2] = "一般";
ratingMsgs[3] = "很好";
ratingMsgs[4] = "极佳";
ratingMsgColors[0] = "#676767";
ratingMsgColors[1] = "#aa0033";
ratingMsgColors[2] = "#f5ac00";
ratingMsgColors[3] = "#6699cc";
ratingMsgColors[4] = "#008000";
barColors[0] = "#dddddd";
barColors[1] = "#aa0033";
barColors[2] = "#ffcc33";
barColors[3] = "#6699cc";
barColors[4] = "#008000";
function passwordGrade(pwd)
{
var score = 0;
var regexArr = ['[0-9]', '[a-z]', '[A-Z]', '[\\W_]'];
var repeatCount = 0;
var prevChar = '';
//长度一个加一分,大于18按18算
var len = pwd.length;
score += len > 18 ? 18 : len;
//字符类型多一个加4分
for (var i = 0, num = regexArr.length; i < num; i++) {
if (eval('/' + regexArr[i] + '/').test(pwd)) {
score += 4;
}
}
for (var i = 0, num = regexArr.length; i < num; i++)
{
if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 2) {
score += 2;
}
if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 5) {
score += 2;
}
}
//重复一次减一分
for (var i = 0, num = pwd.length; i < num; i++) {
if (pwd.charAt(i) == prevChar) {
repeatCount++;
}
else {
prevChar = pwd.charAt(i);
}
}
score -= repeatCount * 1;
return score;
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd)
{
if (pwd == null || pwd == '') {
resetBar();
}
else
{
if (pwd.length <= 4) {
DrawBar(0);
return;
}
var S_level;
mark = passwordGrade(pwd);
//弱
if (mark <= 10) {
S_level = 1;
}
//一般
if (mark > 10 && mark <= 20) {
S_level = 2;
}
//很好
if (mark > 20 && mark <= 30) {
S_level = 3;
}
//极佳
if (mark > 30) {
S_level = 4;
}
DrawBar(S_level);
}
return;
}
function DrawBar(rating)
{
var posbar = getElement('posBar');
var negbar = getElement('negBar');
var passwdRating = getElement('passwdRating');
var barLength = getElement('passwdBarDiv').width;
if (rating >= 0 && rating <= 4) {
posbar.style.width = barLength / 4 * rating;
negbar.style.width = barLength / 4 * (4 - rating);
}
else {
posbar.style.width = 0;
negbar.style.width = barLength;
rating = 5;
}
posbar.style.background = barColors[rating];
passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] + "'>" + ratingMsgs[rating] + "</font>";
}
function resetBar()
{
var posbar = getElement('posBar');
var negbar = getElement('negBar');
var passwdRating = getElement('passwdRating');
var barLength = getElement('passwdBar').width;
posbar.style.width = "0px";
negbar.style.width = barLength + "px";
passwdRating.innerHTML = "";
}
function getElement(name)
{
if (document.all) {
return document.all(name);
}
return document.getElementById(name);
}
<INPUT id=Passwd onkeyup="pwStrength(this.value);" onBlur="pwStrength(this.value);" size=30 type=password name=Passwd>
<TABLE id=passwdBar border=0 cellSpacing=0 cellPadding=0 width=160 bgColor=#ffffff>
<TBODY>
<TR>
<TD style="WIDTH: 0px; BACKGROUND: #ffcc33" id=posBar bgColor=#e0e0e0 height=4 width=0%></TD>
<TD style="WIDTH: 180px" id=negBar bgColor=#e0e0e0 height=4 width="100%"></TD>
</TR>
</TBODY>
</TABLE>
js代码格式整理网站
http://tools.jb51.net/tools/js_geshihua.asp
分享到:
相关推荐
javascript校验密码强度,强大的JavaScript框架支持
NULL 博文链接:https://cn-legend.iteye.com/blog/1346498
使用JS检测输入的密码强度,可以独立于HTML页面,测试文件将其写在一起,需要的读者可以分开测试
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能,在以前的文章中,我们曾经给出过一段检验密码强度的例子,今天再看一个与《js密码强度校验》的代码。 效果: <html> <head> [removed] //...
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
前台jquery实现密码强度的校验,防止密码强度太弱,java防止jquery验证被跳过,实现同原理的密码重复校验
jsp密码强度检测jsp密码强度检测jsp密码强度检测
jquery.validate表单验证密码完整例子(带密码强度显示)
javascript密码强度检测 javascript密码强度检测
为了保证网站个人信息的安全,很多网站在注册页面都设置密码强度这项,用javascript如何实现密码强度校验代码呢?下面小编给大家整理了两种方法使用javascript密码强度校验代码,有需要的朋友可以参考下
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
JavaScript简单的密码强度验证,欢迎使用!
本文主要介绍了js利用正则表达式验证密码强度的实例,具有很好的参考价值。下面跟着小编一起来看下吧
密码强度插件Power PWChecker是一款当用户键入密码的时候,提示的密码强度。允许强制执行指定最小和最大密码长度,密码长度策略;它也能在输入密码不一致的情况下,提示用户。
vue.js表单输入框密码强度验证代码是一款适用于电脑跟手机注册表单输入密码强度验证特效。
网页模板——vue.js实现适用于手机端注册表单输入密码强度验证功能源码
我们在填写表单的时候,特别是输入密码的时候,经常看到实时显示密码强度的效果,那么这种效果如何通过我们的原生js实现呢? 思路: 1.密码通常是由数字,大写字母,小写字母以及特殊字符组成 2.密码全部是纯数字或者...
用js写的一个用来验证密码强度的,特效和京东的一模一样.喜欢的就收藏.