<!doctype html>

<html>

<head>

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

function getPasswordStrength(password){

  var strength=0;

  $([/.{6,}/,/[0-9]+/,/[a-z]+/,/[A-Z]+/,/[^0-9a-zA-Z]+/]).each(function(i,o){

      console.log(i,o,strength);

      if(o.test(password)) strength++;

  });

  return strength;

}

function showStrength(password) {

  var strength = getPasswordStrength(password);

  var status = strength < 3 ? 'low' : (strength < 5 ? 'medium' : 'high');

  var desc = strength < 3 ? '强度很低' : (strength < 5 ? '中等强度' : '高强度');

  $('#passwordStrength').attr('class',status).html(desc);

}

    </script>

<style>

/*密码强度样式的定义*/

.high{color:green}

.medium{color:blue}

.low{color:red}

</style>

</head>

<body>

<form>

密码： <input type="password" onkeyup="showStrength(this.value)"/> <span id="passwordStrength"></span>

</form>

</body>

</html>

密码强度demo（弱中强）的更多相关文章

  1. JS 密码弱中强显示

    <!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" conten ...

  2. 使用javascript对密码进行有密码强度提示的验证

    好些网站的注册功能中,都有对密码进行验证并且还有强度提示.下面就来实现这种效果.密码强度说明:密码强度:弱——纯数字,纯字母,纯符号密码强度:中——数字,字母,符号任意两种的组合密码强度:强——数字, ...

  3. js密码强度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 密码强度的js插件（完成）

    效果如下图: 低:

  5. 密码强度应用(js)

    <!-- 密码强度div --> <div id="tips" class="help-block"> <b class=&quo ...

  6. java中强,软,弱,虚引用 以及WeakHahMap

    java中强,软,弱,虚引用  以及WeakHahMap   一:强软引用: 参考:http://zhangjunhd.blog.51cto.com/113473/53092/进行分析   packa ...

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

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

  8. js判断密码强度

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

  9. 如何在nopcommerce3.3注册页面添加密码强度检查仪？

    我刚刚完成了nopCommerce注册页面的密码强度检查仪,因为我觉得在电子商务交易平台,安全问题是非常重要的.在注册页面有必要添加一个密码强度检测仪,以便通知用户他们的密码是否足够强大.今天,大多数 ...

随机推荐

  1. Application runtime path "/opt/lampp/htdocs/yii/test/protected/runtime" is not valid. 错误

    原因:把windows版的Yii框架写的程序中的拷到Linux去,assets和runtime目录对Group和其他的权限不够.解决方案:点击这2个文件的属性,属性框全选好了,权限777了. cd p ...

  2. mysql中json_merge函数的使用?

    需求描述: 通过mysql中的json_merge函数,可以将多个json对象合并成一个对象 操作过程: 1.查看一张包含json列的表 mysql> select * from tab_jso ...

  3. Linux查看系统进程

    1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 tomcat 的 to 按 tab).2. ps ...

  4. wcf中的使用全双工通信(转)

    wcf中的使用全双工通信   wcf中的契约通信默认是请求恢复的方式,当客户端发出请求后,一直到服务端回复时,才可以继续执行下面的代码. 除了使用请求应答方式的通信外,还可以使用全双工.下面给出例子: ...

  5. sublime + emmet(Zen Coding)

    今天接触sublime这个编辑器,一下子就喜欢上它了,以前我一直使用NOTEPAD++,果断换上sublime玩玩,呵呵 编辑功能啥的没话,作为前端开发的话,和emmet(原名叫Zen Coding) ...

  6. 【Python】TF环境

    1.pip show pip 2.python -m pip install --upgrade pip 3.conda list 4.pip install tensorflow 5.pip ins ...

  7. 【代码审计】eduaskcms_v1.0.7前台存储型XSS漏洞分析

      0x00 环境准备 eduaskcms官网:https://www.eduaskcms.xin 网站源码版本:eduaskcms-1.0.7 程序源码下载:https://www.eduaskcm ...

  8. PHP关于=>和->以及::的用法

    1.=>的用法 在php中数组默认键名是整数,也可以自己定义任意字符键名(最好是有实际意义),如: $css=array('style'=>'0',‘color’=>‘green‘) ...

  9. .net环境下的缓存技术-转载！

    摘要: 介绍缓存的基本概念和常用的缓存技术,给出了各种技术的实现机制的简单介绍和适用范围说明,以及设计缓存方案应该考虑的问题(共17页) 1         概念 1.1   缓存能解决的问题 · 性 ...

  10. DELPHI XE Android 开发笔记

    第一次编译时,设定android SDK: F:\RAD Studio XE6\PlatformSDKs\adt-bundle-windows-x86-20131030\sdk F:\RAD Stud ...