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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JavaScript手写数组的常用函数总结
Nov 22 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设计模式中的工厂模式
2008/06/12 PHP
PHP多例模式介绍
2013/06/24 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
区域销售经理岗位职责
2013/12/10 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
大学生个人求职信例文
2014/07/07 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
计划生育工作汇报
2014/10/28 职场文书
英文慰问信范文
2015/03/24 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
Python 如何安装Selenium
2021/05/06 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL