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 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
详解vue项目打包步骤
Mar 29 Javascript
浅谈vue.use()方法从源码到使用
May 12 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
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
js实现星星打分效果
2020/07/05 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
Python中的类学习笔记
2014/09/23 Python
python数据结构之链表的实例讲解
2017/07/25 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
Unix如何添加新的用户
2014/08/20 面试题
小学六年级学生评语
2014/04/22 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
银行求职自荐信
2014/06/30 职场文书
交通事故委托书范本
2014/09/28 职场文书
体育活动总结
2015/02/04 职场文书
2015年大学生实习评语
2015/03/25 职场文书
无故旷工检讨书
2015/08/15 职场文书
赞美教师的句子
2019/09/02 职场文书