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自动显示最后更新时间
Mar 15 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
JS实现的简单分页功能示例
Aug 23 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
vue实现图书管理系统
Dec 29 Vue.js
浅谈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常用字符串比较函数实例汇总
2014/11/24 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
中文专业毕业生自荐信
2013/10/28 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
文明城市标语
2014/06/16 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS