Saya telah mengerjakan proyek pass baru -baru ini. Memasukkan kata sandi dalam modul pendaftaran di dalamnya membutuhkan kekuatan kata sandi (rendah, sedang dan tinggi). Hari ini saya akan berbagi dengan Anda hasil pekerjaan. Kode ini tidak serumit pencarian online dan dapat memenuhi kebutuhan umum.
Kode HTML adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8"/>
<Title> Kekuatan Kata Sandi </iteme>
<type style = "text/css">
#passstrength {height: 6px; lebar: 120px; border: 1px solid #ccc; padding: 2px;}
.strengthlv1 {latar belakang: merah; tinggi: 6px; lebar: 40px;}
.strengthlv2 {latar belakang: oranye; tinggi: 6px; lebar: 80px;}
.strengthlv3 {latar belakang: green; tinggi: 6px; lebar: 120px;}
</tyle>
</head>
<body>
<input type = "password" name = "pass" id = "pass" maxlength = "16"/>
<div>
<em> Kekuatan Kata Sandi: </em>
<Div id = "passStrength"> </div>
</div>
</body>
</html>
<script type = "text/javascript" src = "js/passwordstrength.js"> </script>
<type skrip = "Teks/JavaScript">
NEW NEWADSTRETREFTE ('Pass', 'PassStrength');
</script>
Kode JS adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
function passwordstrength (kata sandi, kuat) {
this.init (kuat);
var _pis = ini;
document.geteLementById (kata sandi) .onkeyup = function () {
_this.checkstrength (this.value);
}
};
Passwordstrength.prototype.init = function (kekuatan) {
var id = document.getElementById (kekuatan);
var div = document.createElement ('div');
var strong = document.createElement ('strong');
this.ostrength = id.AppendChild (div);
this.ostrengthtxt = id.parentnode.appendChild (kuat);
};
PasswordStright.Prototype.CheckStright = function (val) {
var alvtxt = ['', 'Low', 'Medium', 'High'];
var lv = 0;
if (val.match (/[az]/g)) {lv ++;}
if (val.match (/[0-9]/g)) {lv ++;}
if (val.match (/(.ht^ a-z0-9])/g)) {lv ++;}
if (val.length <6) {lv = 0;}
if (lv> 3) {lv = 3;}
this.ostrength.className = 'kekuatan' + lv;
this.ostrengthtxt.innerHtml = alvtxt [lv];
};
Gambar reproduksi:
Petunjuk Penggunaan:
1. Parameter pertama dari objek adalah ID dari kotak input kata sandi, dan parameter kedua adalah ID dari bilah kekuatan kata sandi.
2. Metode CheckStrength dapat menyesuaikan aturan kekuatan kata sandi.
3. Kekuatan kata sandi menampilkan rendah, sedang dan tinggi sesuai dengan 3 gaya CSS (StrengthLV1, Strengthlv2, StrengthLV3).