jQuery实现提示密码强度的代码


Posted in Javascript onJuly 15, 2015

如何实现色条随输入密码长度变化效果:

在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度。下面就简单介绍一下使用jQuery如何实现此功能。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三水点靠木</title>
<style type="text/css">
.box {
  width: 200px;
  height: 10px;
  border: 1px solid #CCC;
  margin-left: 58px;
}
.bg {
  height: 10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#mytext").keyup(function(){
  var textMax=20;
  $("#mytext").attr("maxlength",textMax);
  var len=$("#mytext").val().length;
  var boxlen=$(".box").css("width");
     
  var inputlength=$("#mytext").val().length;
  var bgwidth=(inputlength/textMax)*parseInt(boxlen);
  $(".bg").css("width",bgwidth);
  if(bgwidth<60)
  {
    $(".bg").css("background-color","#F00");
   }
  else if(60<=bgwidth && bgwidth<120)
  {
    $(".bg").css("background-color","#F90");
  }
  else if(bgwidth>=120)
  {
    $(".bg").css("background-color","#6F3");
  }
 })
})
</script>
</head>
<body>
<div>用户名:
 <input type="text" name="username" id="mytext" />
</div>
<div class="box">
 <div class="bg"></div>
</div>
</body>
</html>

以上代码基本实现了我们需要的功能,当在文本框输入内容的时候,下面的背景条长度和颜色都会跟随者变化。下面就简单介绍一下如何实现此效果:

一.这里运用了keyup事件,也就是当输入文本后,当按键松开后就会触发此事件,以此来实现每当输入一段文本,相应的背景条长度和颜色就会进行调整。

二.var textMax=20用来定义text文本框最大输入长度,通过 $("#mytext").attr("maxlength",textMax)设置文本框的maxlength属性,并且将属性值设置为textMax。

三.$(".box").css("width")返回box元素的宽度,$("#mytext").val().length返回输入内容的长度,这样inputlength/textMax就可以计算出当前输入元素的长度和和文本框最大输入长度的比例,这样用这个比例值乘以box元素的宽度,就可以计算出当前背景条的长度,代码即是:(inputlength/textMax)*parseInt(boxlen),这里特别要注意parseInt()函数的使用,否则返回值是NaN,因为boxlen值是通过$(".box").css("width")返回的,是个字符串,并且后面带有"px"单位。

四.if语句通过判断当前背景条的长度来判断背景条的颜色。

以上所述就是本文的全部内容了,希望大家能够喜欢

Javascript 相关文章推荐
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
初探JavaScript 面向对象(推荐)
Sep 03 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
解读ES6中class关键字
Nov 20 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
浅谈javascript中return语句
Jul 15 #Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 #Javascript
javascript实现在线客服效果
Jul 15 #Javascript
jQuery实现的进度条效果
Jul 15 #Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 #Javascript
jQuery的事件委托实例分析
Jul 15 #Javascript
jQuery的end()方法使用详解
Jul 15 #Javascript
You might like
php adodb连接不同数据库
2009/03/19 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php数组使用规则分析
2015/02/27 PHP
php实现的操作excel类详解
2016/01/15 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
封装html的select标签的js操作实例
2013/07/02 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python操作xml文件示例
2014/04/07 Python
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python fileinput模块使用实例
2015/06/03 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
python中实现词云图的示例
2020/12/19 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
师范大学音乐表演专业求职信
2013/10/23 职场文书
个人函授自我鉴定
2014/03/25 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
企业承诺书格式范文
2015/04/28 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android