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

html 代码如下：

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8"/>
  5.     <title>密码强度</title>
  6.     <style type="text/css">
  7.     #passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;}
  8.     .strengthLv1{background:red;height:6px;width:40px;}
  9.     .strengthLv2{background:orange;height:6px;width:80px;}
  10.     .strengthLv3{background:green;height:6px;width:120px;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <input type="password" name="pass" id="pass" maxlength="16"/>
  15.     <div class="pass-wrap">
  16.         <em>密码强度：</em>
  17.         <div id="passStrength"></div>
  18.     </div>
  19. </body>
  20. </html>
  21. <script type="text/javascript" src="js/passwordStrength.js"></script>
  22. <script type="text/javascript">
  23. new PasswordStrength('pass','passStrength');
  24. </script>

js 代码如下：

  1. function PasswordStrength(passwordID,strengthID){
  2.     this.init(strengthID);
  3.     var _this = this;
  4.     document.getElementById(passwordID).onkeyup = function(){
  5.         _this.checkStrength(this.value);
  6.     }
  7. };
  8. PasswordStrength.prototype.init = function(strengthID){
  9.     var id = document.getElementById(strengthID);
  10.     var div = document.createElement('div');
  11.     var strong = document.createElement('strong');
  12.     this.oStrength = id.appendChild(div);
  13.     this.oStrengthTxt = id.parentNode.appendChild(strong);
  14. };
  15. PasswordStrength.prototype.checkStrength = function (val){
  16.     var aLvTxt = ['','低','中','高'];
  17.     var lv = 0;
  18.     if(val.match(/[a-z]/g)){lv++;}
  19.     if(val.match(/[0-9]/g)){lv++;}
  20.     if(val.match(/(.[^a-z0-9])/g)){lv++;}
  21.     if(val.length < 6){lv=0;}
  22.     if(lv > 3){lv=3;}
  23.     this.oStrength.className = 'strengthLv' + lv;
  24.     this.oStrengthTxt.innerHTML = aLvTxt[lv];
  25. };

效果图：

使用说明：

1、对象的第一个参数是密码输入框的 id，第二个参数是密码强度长条的 id。

2、checkStrength 方法中可以自定义密码强度的规则。

3、密码强度显示低中高分别对应 3 个 css 样式（strengthLv1、strengthLv2、strengthLv3）。

【javascript】js 检验密码强度的更多相关文章

  1. 正则表达式之js检验密码强度

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

  2. js 检验密码强度

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

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

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

  4. js实现密码强度验证

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

  5. js实现密码强度

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

  6. js判断密码强度

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

  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. Win8.1开机自启动程序

    动机: 开机自启动goagent与锐捷 问题: goagent没有自启动选项;锐捷开启"登录后启动"却一直没有启动 解决方案: 使用计划任务启动goagent+彻底关闭UAC使锐捷 ...

  2. Another app is currently holding the yum lock; waiting for it to exit.. yum被锁定无法使用

    yum被锁定无法使用 Another app is currently holding the yum lock; waiting for it to exit.. 解决方法: rm -rf /var ...

  3. 开源企业IM-免费企业即时通讯-ENTBOOST V2014.180 Windows版本号正式公布

    ENTBOOST,VERSION 2014.180 Linux版本号公布,主要添加企业IM应用集成功能,完好安卓SDK功能及部分BUG修正. 下一版本号公布时间.7月15日.敬请关注. ENTBOOS ...

  4. 【Unity】11.3 基本碰撞体（箱体、球形、胶囊、网格）

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 碰撞组件(Collider) 是另一种必须随刚体 (Rigidbody) 添加的组件,以便允许它和其他组件发生碰撞.或者 ...

  5. Xcode6中添加pch文件

    转自:http://www.cnblogs.com/YouXianMing/p/3989155.html 1. 新建工程: 2. 创建pch文件: 3. 在setting里面进行设置: 4. 一切尽在 ...

  6. /etc/ssh/sshd_config 关建字:PermitRootLogin no　　禁示以root身份登录服务器

    这种情况,不会影响,普通用户su到root

  7. 关于casperjs的wait方法的执行顺序

    var casper = require('casper').create({ viewportSize:{ width:1920, height:1080 } }); var url1 = 'htt ...

  8. 数据加密 - TDE透明数据加密原理

    首先需要确定你需要加密的列,Oracle 10g数据库将为包含加密列的表创建一个私密的安全加密密钥(表秘钥), 然后采用你指定的加密算法(AES或3DES)加密指定列的明文数据.此时,保护表的加密密钥 ...

  9. sessionStorage 、localStorage、cookie

     特性  cookie  localStorage  sessionStorage  存储  浏览器端,同源限制   浏览器端,同源限制    浏览器端,同源限制    容量   <=4K  5 ...

  10. u3d中的向量 vector3 vector2

    Vector3(x,y,z)x代表左右,y代表上下,z代表前后 Vector3.magnitude 长度 计算两点之间的距离  .如果只给了一点的话.算出的长度其实就是和Vector3.zero点之间 ...