<!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. v9定时发布的简单实现方法[支持静态生成]

    将以下代码放到 api/count.php 文件最后 的 ?>之前 //add 定时发布审核功能 $modelid = $modelid ? $modelid : intval($_GET['m ...

  2. anaconda-ks.cfg详解

    https://blog.csdn.net/whyhonest/article/details/7555229

  3. nano-sql.js的基本操作

    nano-sql是一个小而快的数据库引擎, 他支持联合查询, 分组, 事务, ORM等功能, 支持 内存, indeedDB, Local Storage, WebSQL, Level DB 注意第一 ...

  4. servlet3.0 新特性和springboot Listener和filter案例

    1.filter package com.newtouch.zxf.filter; import java.io.IOException; import javax.servlet.Filter; i ...

  5. C#客户端嵌入Chrome浏览器的实现

    https://blog.csdn.net/lanwilliam/article/details/79639823 客户端软件,也就是传统的Winform软件,在很多时候是很好用的.因为在做一些打印. ...

  6. SpringMVC -- 梗概--源码--贰--mvc:annotation-driven

    1>在springMVC的处理流程中,有两个重要组件:HandlerMapping和HandlerAdapter 分别负责解析Handler和执行Handler 2>如果配置了<mv ...

  7. 8 -- 深入使用Spring -- 3...3 使用Resouce作为属性

    8.3.3 使用Resouce作为属性 当应用程序中的Bean实例需要访问资源时,Spring可以直接利用依赖注入. 如果Bean实例需要访问资源,有如下两种解决方案: ⊙ 在代码中获取Resourc ...

  8. 【AI】face_recognition

    1.pip install cmake 2.pip install boost 3.pip install dlib 4.pip install face_recognition

  9. 【遥感影像】Python GDAL 像素与坐标对应

    转:https://blog.csdn.net/theonegis/article/details/50805520 https://blog.csdn.net/wsp_1138886114/arti ...

  10. 查找被占用的端口的服务并kill掉

    转自:http://blog.csdn.net/gsls200808/article/details/52456136 方法: C:\>netstat -ano|findstr 8000 TCP ...