编程 Javascript

jQuery插件passwordStrength密码强度指标详解

Posted in Javascript onJune 24, 2016

passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>passwordStrength</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
 $('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
 
#autotab input { width:138px; }
</style>
</head>
<body>
<hr />
<h3>passwordStrength密码强度指标</h3>
<form action="" method="post" id="autotab" class="p1">
 <label>请输入密码：
  <input type="password" name="password" />
  <div id="passwordStrengthDiv" class="is0"></div>
 </label>
</form>
</body>
</html>

上例用到一个图片：

执行效果图：

jQuery插件passwordStrength密码强度指标详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery插件passwordStrength密码强度指标详解

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript 面向对象继承

May 13 Javascript

基于JQuery模仿苹果桌面的Dock效果(初级版)

Oct 15 Javascript

javascript模拟枚举的简单实例

Mar 06 Javascript

javascript常用的正则表达式实例

May 15 Javascript

用JS实现轮播图效果（二）

Jun 26 Javascript

Bootstrap被封装的弹层

Jul 20 Javascript

深入学习jQuery中的data()

Dec 22 Javascript

ES6新数据结构Set与WeakSet用法分析

Mar 31 Javascript

浅谈在vue项目中如何定义全局变量和全局函数

Oct 24 Javascript

浅谈Vue下使用百度地图的简易方法

Mar 23 Javascript

详解vue中$nextTick和$forceUpdate的用法

Dec 11 Javascript

比较node.js和Deno

Apr 27 Javascript

jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍

Jun 24 #Javascript

jquery表单插件Autotab使用方法详解

Jun 24 #Javascript

jQuery插件cxSelect多级联动下拉菜单实例解析

Jun 24 #Javascript

jQuery下拉框的简单应用

Jun 24 #Javascript

浅谈json取值(对象和数组)

Jun 24 #Javascript

json对象与数组以及转换成js对象的简单实现方法

Jun 24 #Javascript

jQuery实现点击弹出背景变暗遮罩效果实例代码

Jun 24 #Javascript