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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery简单实现日历的方法
May 04 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
JS array数组检测方式解析
May 19 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微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
jquery里的正则表达式说明
2011/08/03 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
js的对象与函数详解
2019/01/21 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
普通员工辞职信
2014/01/17 职场文书
心理学专业求职信
2014/06/16 职场文书
纪委立案决定书
2015/06/24 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
mysql 子查询的使用
2022/04/28 MySQL