js kekuatan kata laluan kemahiran kod_javascript pengesanan masa nyata

Penghakiman kekuatan kata laluan adalah sesuatu yang mesti dilakukan semasa mendaftarkan pengguna tapak web yang berbeza melaksanakannya dengan cara yang berbeza Pertimbangan kata laluan sebenarnya adalah salah satu aspek pengesahan borang. Mari kita laksanakan operasi yang begitu mudah.

Mula-mula buat kotak input kata laluan ringkas dan bar kemajuan yang menunjukkan kekuatan kata laluan. Semuanya dilindungi oleh kotak valid_pass. Kotak ini mengandungi tajuk, kotak kata laluan.

<div class="vali_pass">
  <h3>简单的密码强度检测</h3>
  <input type="password" name="pass">
  <div class="vali_pass_progress">
    <span class="vali_pass_inner_progress"></span>
  </div>
</div>

Mari gunakan CSS untuk mencantikkannya

.vali_pass {
  width: 350px;
  margin: 0 auto;
  padding: 10px;
  border: #eee 1px solid;
  text-align: center;
}
.vali_pass input {
  width: 96%;
  display: block;
  margin: 0;
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
}
.vali_pass_progress {
  margin-top: 10px;
  background-color: #efefef;
  height: 10px;
  border-radius: 5px;
}
.vali_pass_inner_progress {
  display: block;
  height: 100%;
  background-color: transparent;
  border-radius: 5px;
  width: 100%;
}

Apa yang perlu kita pertimbangkan pada masa ini ialah bar kemajuan ini mungkin mempunyai beberapa keadaan Apakah keadaan yang dipaparkan apabila tahap rendah, keadaan yang dipaparkan apabila tahap sederhana dan keadaan yang dipaparkan apabila tahap adalah. tinggi.

OK, apabila kami menggunakannya di sini, kami mengawal lebar dan warna latar belakang kotak di dalam bar kemajuan Tetapkannya kepada tiga gaya

.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}

Dengan cara ini, struktur HTML dan pengindahan CSS selesai. Seterusnya kami akan melakukan pemantauan JS.

Perkara pertama yang amat diperlukan ialah menambah pemantauan input teks pada kotak input kata laluan

ele_pass.onkeyup = function () {...}

Pertimbangan kata laluan mesti diproses dalam acara ini Tetapi sebelum memproses, kami perlu memulakan beberapa data Contohnya, ungkapan biasa untuk pertimbangan kata laluan.

var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

Saya menggunakan tiga peraturan biasa di sini untuk menilai tahap pemadanan kata laluan mengikut urutan Selepas pemulaan data selesai, acara onkeyup diproses yang pertama adalah untuk mendapatkan nilai kotak input, dan kemudian panjangnya. Kami mengawal panjang di sini untuk sekurang-kurangnya 6 aksara Sebagai peningkatan dalam keselamatan Setiap kali ungkapan dalam padanan biasa dipadankan, sec++ menunjukkan keselamatan kata laluan itu . Nilai ini boleh digunakan dengan mudah untuk mengawal lebar bar kemajuan dalaman.

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
}

Selepas lebar bar kemajuan dikawal, kami tidak dapat melihat kesan bar kemajuan buat masa ini. Lihat kod CSS sebelumnya warna latar belakang. Kod berikut digunakan untuk mengawal warna latar belakangnya.

if(result > 0 && result <= 50){
  ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
  ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
  ele_progress.setAttribute("class",begin_classname + " strong");
}

Kod JS terakhir:

var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {
  var val = this.value;
  var len = val.length;
  var sec = 0;
  if (len >= 6) { // 至少六个字符
    for (var i = 0; i < regxs.length; i++) {
      if (val.match(regxs[i])) {
        sec++;
      }
    }
  }
  var result = (sec / regxs.length) * 100;
  ele_progress.style.width = result + "%";
  if(result > 0 && result <= 50){
    ele_progress.setAttribute("class",begin_classname + " error");
  }else if (result > 50 && result < 100) {
    ele_progress.setAttribute("class",begin_classname + " middle");
  } else if (result == 100) {
    ele_progress.setAttribute("class",begin_classname + " strong");
  }

}

Kemudian mari kita lihat kesan kami:

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.