最近一直在做通行证项目，里面的注册模块中输入密码需要显示密码强度（低中高）。今天就把做的效果给大家分享下，代码没有网上搜索的那么复杂，能够满足一般的需求。

html 代码如下：

<!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>

js 代码如下：

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）。

原文链接：【JavaScript】js检验密码强度

正则表达式之js检验密码强度的更多相关文章

  1. js 检验密码强度

    html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset=&quo ...

  2. 【javascript】js 检验密码强度

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYP ...

  3. 利用JavaScript来实现用动态检验密码强度

    平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以 ...

  4. js判断密码强度

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

  5. js实现密码强度验证

    <html> <head> <meta http-equiv="content-type" content="text/html" ...

  6. js实现密码强度

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

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

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

  9. js校验密码强度

    网上转载的一段代码,留着以后用, js文件: //判断输入密码的类型 function CharMode(iN){ if (iN>=48 && iN <=57) //数字 ...

随机推荐

  1. 有return如果是try catch finally运行命令

    背景: 昨天一个朋友出去采访,遇到这样的问题:"C#  catch那里return.finally也弄它运行?" 个人总结实践: 1.无论有木有出现异常.finally块中代码都会 ...

  2. .net操作PDF的一些资源(downmoon收集)

    因为业务需要,搜集了一些.net操作pdf的一些资源,特在此分享. 1.如何从 Adobe 可移植文档格式 (PDF) 文件中复制文本和图形 http://support.microsoft.com/ ...

  3. CSS3中文手册基础知识

    CSS3手册是学习CSS3的最佳文档,不管是自己写博客,还是买书,手册少不了.今天我给大家介绍一些CSS3有哪些分类及其使用. 具体参考:http://caibaojian.com/css3/ 上来进 ...

  4. Effective C++(14) 在资源管理类中小心copying行为

    问题聚焦:     上一条款所告诉我们的智能指针,只适合与在堆中的资源,而并非所有资源都是在堆中的.     这时候,我们可能需要建立自己的资源管理类,那么建立自己的资源管理类时,需要注意什么呢?. ...

  5. NPOI 2.0 Excel读取显示

    NPOI 2.0 Excel读取显示   最近接到需求,需要把excel表格里的数据原样展示到web页面,主要是满足随意跨行跨列. 之前用过一点NPOI,不过接触的不太多,趁这次机会再熟悉一下.由于操 ...

  6. iOS生命周期 & 通知中心

    笔记内容 学习笔记-段玉磊 Stanford course View Controller Lifecycle 这篇文是我记载Developing iOS 7 Apps公开课 第5课的笔记 UITex ...

  7. ThoughtWorks开发持续集成及部署利器:Go

    持续集成及部署利器:Go   Go是一款先进的持续集成和发布管理系统,由ThoughtWorks开发.(不要和Google的编程语言Go混淆了!)其前身为Cruise,是ThoughtWorks在做咨 ...

  8. script —— 终端里的记录器

    当 你在终端或者控制台工作时,你可能想要记录在终端中所做的一切.这些记录可以用来当作史料,保存终端所发生的一切.比如说,你和一些Linux管理员们同 时管理着相同的机器,或者你让某人远程登陆到了你的服 ...

  9. django源码阅读

    最近再看django-bootstrap-toolkit,一直困惑于静态文件的路径问题.所以只能从源码入手了.   从manage.py开始.manage.py 比较简单就几句话. #!/usr/bi ...

  10. [Usaco2008 Feb]Line连线游戏[暴力][水题]

    Description Farmer John最近发明了一个游戏,来考验自命不凡的贝茜.游戏开始的时 候,FJ会给贝茜一块画着N (2 <= N <= 200)个不重合的点的木板,其中第i ...