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

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

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

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

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

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

  3. js判断密码强度

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

  4. js实现密码强度验证

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

  5. js实现密码强度

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

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

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

  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. 【转】HDMI控制与组态剖析

    HDMI能够称霸为王者之尊吗?目前消费者陷入的困境就是Audio/Video的连接线数量过度庞大,而HDMI最大卖点之一就是可使用单一的连接线完全取代众多的影音连接线,简洁又方便.缺点是技术版本变动太 ...

  2. c# 高斯模糊

    using System; using System.Collections.Generic; using System.Text; using System.Drawing; using Syste ...

  3. Android设备定制为永不锁屏

    Android系统的锁屏时间存放在Setting数据库中,字段为Settings.System.SCREEN_OFF_TIMEOUT.查看 DatabaseHelper.java文件可以找到: fra ...

  4. linux下SSH远程连接服务慢解决方案

    1.适用命令及方案如下:[远程连接及执行命令]ssh -p22root@10.0.0.19ssh -p22 root@10.0.0.19 /sbin/ifconfig[远程拷贝:推送及拉取]scp - ...

  5. SQL Server 2008 忘记sa密码的解决办法

    由于某些原因,sa和windows验证都不能登录 sql server,可以用独占模式,修改sa密码先在服务管理器停止Sql Server服务,然后打开命令行,进入 SQL Server安装目录,进入 ...

  6. PhpExcel使用方法

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  7. ASP.NET MVC Json() 处理大数据异常解决方法 json MaxJsonLength

    网上很多解决方案,在webconfig中添加,但是实践证明无效 <system.web.extensions> <scripting> <webServices> ...

  8. 利用jQuery实现的Ajax 验证用户名是否存在

    异步刷新实现方式有多种,也可以借助JS的多种框架,下面是使用jQuery框架实现的AJAX 验证用户名是否存在 jQuery.ajax概述 HTTP 请求加载远程数据. 通过jQuery 底层 AJA ...

  9. MySQL数据库主从同步安装与配置总结

    MySQL的主从同步是一个很成熟的架构,优点为: ①在从服务器可以执行查询工作(即我们常说的读功能),降低主服务器压力: ②在从主服务器进行备份,避免备份期间影响主服务器服务: ③当主服务器出现问题时 ...

  10. VMware下设置CentOS虚拟机与主机同一网段

    由于在开发中经常使用到自己的电脑搭建虚拟机器进行个人开发,而虚拟机器每次登录所使用的命令行界面比较小,看起来也不舒服.以下主要对centos虚拟机器下配置与主机共享同一网段IP,通过第三方软件(put ...