<!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. 基于.NET平台常用的框架

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  2. tomcat和nginx的使用

    1.下载tomcat,配置conf/server.xml,在Host节点下添加Context节点,指定程序目录: <Context path="/ol" docBase=&q ...

  3. mysql 日志操作

    https://www.cnblogs.com/dreamworlds/p/5478293.html http://www.jb51.net/article/76886.htm

  4. scrapy 元素的相对xpath

  5. Java用三元运算符判断奇数和偶数

    创建一个类,在该类的主方法中创建标准输入流的扫描器对象,提示用户输入一个整数,并通过扫描器的方法来接受这个整数,然后通过三元运算符判断该数字与2的余数,如果余数为0,说明其是偶数,否则是奇数. imp ...

  6. 5 -- Hibernate的基本用法 --1 1 对象/关系数据库映射(ORM)

    ORM的全称是Object/Relation Mapping ,即对象/关系数据库映射.ORM可理解成一种规范,它概述了这类框架的基本特征:完成面向对象的编程语言到关系数据库的映射.当ORM框架完成映 ...

  7. 第一篇：Hadoop简介

    前言 本文大致介绍下Hadoop的一些背景知识,为后面深入学习打下铺垫. 什么是Hadoop Hadoop是一个开源分布式计算平台,它以HDFS文件系统和MapReduce计算框架为核心. 前者能够让 ...

  8. Git的撤销与回滚

    1,commit 之前的撤销 未添加至暂存区的撤销(add 之前) git status git checkout . 已添加至暂存区的撤销(add 之后,有或者没有commit操作都可以执行) gi ...

  9. C++ template —— 模板基础（一）

    <C++ Template>对Template各个方面进行了较为深度详细的解析,故而本系列博客按书本的各章顺序编排,并只作为简单的读书笔记,详细讲解请购买原版书籍(绝对物超所值).---- ...

  10. Qt5 教程

    序 Qt 前言 Hello, world! 信号槽 自定义信号槽 Qt 模块简介 MainWindow 简介 添加动作 资源文件 对象模型 布局管理器 菜单栏.工具栏和状态栏 对话框简介 对话框数据传 ...