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 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 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连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python实现多进程共享数据的方法分析
2017/12/04 Python
详解python的ORM中Pony用法
2018/02/09 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python爬虫基础知识点整理
2020/06/02 Python
Python控制台实现交互式环境执行
2020/06/09 Python
什么是python的自省
2020/06/21 Python
办公室文员工作自我评价
2013/12/01 职场文书
兽医医药专业求职信
2014/07/27 职场文书
个人贷款收入证明
2014/10/26 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
谢师宴学生致辞
2015/07/27 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript