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密码强度指标详解

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

Javascript 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
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
You might like
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
destoon官方标签大全
2014/06/20 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
js 编写规范
2010/03/03 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python中的计时器timeit的使用方法
2017/10/20 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
2016/03/21 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
JDO的含义
2012/11/17 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
岗位职责的构建方法
2014/02/01 职场文书
双语教学实施方案
2014/03/23 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
优质服务活动实施方案
2014/05/02 职场文书
公司募捐倡议书
2014/05/14 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
工作年限证明模板
2015/06/15 职场文书