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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
js+css3制作时钟特效
Oct 16 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
React Native模块之Permissions权限申请的实例相机
Sep 28 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
JS中的模糊查询功能
Dec 08 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新手上路(十)
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php 无法载入mysql扩展
2010/03/12 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
Linux下编译安装MySQL-Python教程
2015/02/02 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
django 常用orm操作详解
2017/09/13 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python dict的常用方法示例代码
2020/06/23 Python
Keras搭建自编码器操作
2020/07/03 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
办公室文书岗位职责
2013/12/16 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
政风行风评议心得体会
2014/10/21 职场文书
2015年少先队活动总结
2015/03/25 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android