jQuery實作提示密碼強度的程式碼_jquery-js教程-PHP中文網

首頁

web前端

js教程

jQuery實作提示密碼強度的程式碼_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:50 PM

jquery

如何實現色條隨輸入密碼長度變化效果:

在許多網站註冊頁面都有這樣的功能，當使用者輸入密碼的時候，下面會出現一個色條，色條的長度會跟隨輸入密碼的長度變化，而色條的顏色也會根據輸入密碼長度的不同有所改變，一般是用來提示密碼強度。以下就簡單介紹一下使用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語句透過判斷目前背景條的長度來判斷背景條的顏色。

以上所述就是本文的全部內容了，希望大家能夠喜歡

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn