jQuery melaksanakan kod untuk meminta kata laluan strength

jQuery melaksanakan kod untuk meminta kata laluan strength_jquery

WBOY

Lepaskan： 2016-05-16 15:50:20

asal

1168 orang telah melayarinya

Bagaimana untuk mencapai kesan bar warna berubah dengan panjang kata laluan yang dimasukkan:

Banyak halaman pendaftaran laman web mempunyai fungsi ini Apabila pengguna memasukkan kata laluan, bar warna akan muncul di bawah. Panjang bar warna akan berubah mengikut panjang kata laluan yang dimasukkan, dan warna bar warna juga berdasarkan kata laluan yang dimasukkan Panjangnya berbeza-beza dan biasanya digunakan untuk menunjukkan kekuatan kata laluan. Berikut ialah pengenalan ringkas tentang cara menggunakan jQuery untuk mencapai fungsi ini. Contoh kod adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas pada asasnya melaksanakan fungsi yang kami perlukan Apabila memasukkan kandungan dalam kotak teks, panjang dan warna bar latar belakang di bawah akan berubah dengan sewajarnya. Berikut ialah pengenalan ringkas tentang cara mencapai kesan ini:

1. Acara keyup digunakan di sini, iaitu, selepas memasukkan teks, acara ini akan dicetuskan apabila kunci dilepaskan Dengan cara ini, apabila sekeping teks dimasukkan, panjang dan warna latar belakang yang sepadan bar akan dilaraskan.

2.var textMax=20 digunakan untuk menentukan panjang input maksimum kotak teks teks Tetapkan atribut panjang maksimum kotak teks melalui $("#mytext").attr("maxlength",textMax), dan. tetapkan nilai atribut kepada textMax.

Tiga.$(".box").css("width") mengembalikan lebar elemen kotak, $("#mytext").val().length mengembalikan panjang kandungan input, jadi panjang input /textMax boleh Kira nisbah antara panjang elemen input semasa dan panjang input maksimum kotak teks Darabkan nisbah ini dengan lebar elemen kotak untuk mengira panjang bar latar belakang semasa. inputlength/textMax)*parseInt (boxlen), beri perhatian khusus kepada penggunaan fungsi parseInt() di sini, jika tidak nilai pulangan ialah NaN, kerana nilai boxlen dikembalikan melalui $(".box").css("width "), iaitu rentetan diikuti dengan Terdapat unit "px".

4. Pernyataan if menentukan warna bar latar belakang dengan menilai panjang bar latar belakang semasa.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya