<!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. phpcms v9模板制作常用代码集合(转)

    phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 ...

  2. thinkphp路由

    一.普通模式 'url_route_on' => false, 二.混合模式 'url_route_on' => true, 'url_route_must'=> false, 三. ...

  3. java okhttp发送post请求

    java的httpclient和okhttp请求网络,构造一个基本的post get请求,都比py的requests步骤多很多,也比py的自带包urllib麻烦些. 先封装成get post工具类,工 ...

  4. SpringMVC由浅入深day02_10拦截器

    10 拦截器 Spring Web MVC 的处理器拦截器类似于Servlet 开发中的过滤器Filter,用于对处理器进行预处理和后处理. 10.1 拦截定义 定义拦截器,实现HandlerInte ...

  5. Java -- 异常的捕获及处理 -- 范例 -- throw与throws的应用

    7.2.3 范例 -- throw与throws的应用 例:综合应用 Class : Math package limeThrowable._7_2_3; public class Math { pu ...

  6. 使用HttpClient访问url的工具类

    maven依赖jar包配置: <dependency> <groupId>org.apache.httpcomponents</groupId> <artif ...

  7. [Linux] 修改用户名密码

    1. 普通用户或root用户修改自身登录密码:在终端使用passwd命令. linaro@linaro-ubuntu-desktop:~$ passwd Changing password for l ...

  8. socket 中文man页面函数

    Linux 套接字的用户接口. 这个 BSD 兼容套接字是介于用户进程与内核网络协议栈之间的统一接口, 各协议模块属于不同的 协议族 ,如 PF_INET, PF_IPX, PF_PACKET 和 套 ...

  9. React Native(十二)——嵌套WebView中的返回处理

    情景描述: 从一个名为"My"的组件点击进去,进入一个列表(该列表内容为webView中内容),其中一个webView也可以点击进入详情页(也为webView),但是如果对导航栏不 ...

  10. 《C++ Primer Plus》16.1 string类 学习笔记

    16.1.1 构造字符串程序清单16.1使用了string的7个构造函数.程序清单16.1 str1.cpp---------------------------------------------- ...