Home > Article > Web Front-end > jQuery implements code to prompt password strength_jquery

jQuery implements code to prompt password strength_jquery

WBOYOriginal: 2016-05-16 15:50:201186browse

How to achieve the effect of the color bar changing with the length of the entered password:

Many website registration pages have this function. When the user enters a password, a color bar will appear below. The length of the color bar will change with the length of the entered password, and the color of the color bar will also be based on the entered password. The length varies and is generally used to indicate password strength. Here is a brief introduction on how to use jQuery to achieve this function. The code example is as follows:

<!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>

The above code basically implements the functions we need. When inputting content in the text box, the length and color of the background bar below will change accordingly. Here is a brief introduction on how to achieve this effect:

1. The keyup event is used here, that is, after inputting text, this event will be triggered when the key is released. In this way, whenever a piece of text is input, the length and color of the corresponding background bar will be adjusted. .

2.var textMax=20 is used to define the maximum input length of the text text box. Set the maxlength attribute of the text box through $("#mytext").attr("maxlength",textMax), and set the attribute value to textMax. .

Three.$(".box").css("width") returns the width of the box element, $("#mytext").val().length returns the length of the input content, so inputlength/textMax can be Calculate the ratio between the length of the current input element and the maximum input length of the text box. Multiply this ratio by the width of the box element to calculate the length of the current background bar. The code is: (inputlength/textMax)*parseInt (boxlen), pay special attention to the use of the parseInt() function here, otherwise the return value is NaN, because the boxlen value is returned through $(".box").css("width"), which is a string followed by There are "px" units.

4. The if statement determines the color of the background bar by judging the length of the current background bar.

The above is the entire content of this article, I hope you all like it

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The jQuery plug-in windowScroll implements single-screen scrolling effects_jqueryNext article：The jQuery plug-in windowScroll implements single-screen scrolling effects_jquery

See more

jQuery implements code to prompt password strength_jquery

Related articles