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 清除输入框中的数据
Apr 13 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
Search Engine Friendly的URL设计
2006/10/09 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
jquery 插件学习(一)
2012/08/06 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
公积金转移接收函
2014/01/11 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
综治目标管理责任书
2015/05/11 职场文书