Bina Pemeriksa Kekuatan Kata Laluan Mudah

Memberi maklum balas segera adalah dalam perkara sekarang. Mengapa mengehadkan diri anda untuk memeriksa nama pengguna dan alamat e -mel? Mengapa tidak memperluaskan ini untuk memberikan maklum balas visual yang cepat mengenai kekuatan kata laluan pengguna mempunyai input? Hari ini, kami akan melihat bagaimana untuk membuat pemeriksa kekuatan kata laluan yang mudah menggunakan ekspresi biasa dan algoritma mudah. Malah sistem yang paling selamat adalah terdedah apabila pengguna memilih kata laluan yang sangat tidak disarankan. Dengan itu, trend baru -baru ini seolah -olah memberikan maklum balas yang cepat kepada pengguna mengenai kekuatan kata laluan supaya pengguna dapat melanjutkan atau mengubah suai kata laluan untuk menjadikannya lebih selamat. Berminat? Mari bermula dengan segera! Berikut adalah demo dari apa yang kita cuba bina hari ini:

peristiwa kotak input. supaya tidak membazirkan kitaran CPU pada penyertaan yang tidak sah. Algoritma menganalisis rentetan, memberikan bonus untuk panjang tambahan dan menggunakan nombor, simbol, dan huruf besar, dan penalti untuk input huruf atau nombor sahaja. Kami tidak akan melihat memeriksa input terhadap kamus kerana ini keluar dari skop artikel. Sekiranya ia lebih besar daripada panjang minimum, berikan skor asas 50. Jadikannya 0. Seterusnya, beralih melalui setiap watak rentetan dan periksa sama ada simbol, nombor, atau huruf besar. Jika ya, buat nota itu.

kemudian periksa berapa banyak aksara tambahan rentetan mempunyai minimum yang disyorkan, dan memberikan bonus untuk setiap watak. Juga berikan bonus jika rentetan mengandungi gabungan huruf besar, nombor, dan simbol, atau ketiga -tiga. Berikan bonus untuk kehadiran masing -masing. Ia tidak akan menjadi sangat kompleks, tetapi ia akan menangkap banyak kata laluan yang buruk. Anda akan memahami ini dengan lebih baik apabila kita melihatnya dalam kod.

markup teras

markup HTML halaman demo kelihatan seperti:

dengan elemen div

<div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

kelas akan mengandungi mesej tentang penalti, jadi kami telah membuatnya berani dan merah. Mulakan pengekodan fungsi yang diperlukan. Perhatikan bahawa kami menggunakan jQuery yang luas. Jangan ragu untuk menghubungkan ke CDN Google jika perlu. Oleh kerana ini adalah demo dan bukan kod pengeluaran, saya memutuskan untuk mengisytiharkan pembolehubah sebagai global dan mengaksesnya melalui kaedah penolong dan bukannya mengisytiharkan mereka secara dalaman dan kemudian lulus mereka ke fungsi. Yang pertama, yang dipanggil Input elemen dan NUM , memegang bilangan aksara tambahan, aksara huruf besar, nombor, dan simbol. Kami melakukan perkara yang sama untuk objek kedua, yang dipanggil Objek Num memegang bilangan aksara, manakala fungsi checkVal akan dipanggil apabila terdapat kata laluan Kami mula -mula mendapatkan kata laluan yang dimasukkan oleh pengguna dan kemudian melakukan beberapa permulaan yang berubah -ubah dalam fungsi OutputResult () , yang menjaga pengertian pengiraan yang dikira. Kami akan melihat bagaimana ia berfungsi kemudian.

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

sekarang akan menentukan kaedah ()

Kami kemudian periksa sama ada rentetan mempunyai huruf besar, nombor, dan simbol. Jika ya, berikan bonus. Kami juga menyemak sama ada ia mempunyai kombinasi dua daripada mereka dan memberikan bonus yang lebih kecil jika ya. Kami menyemak ini dengan ungkapan biasa dan, jika ya, menghukum kata laluan untuk amalan ini. Kami menambah skor asas kepada produk bilangan aksara yang berlebihan dan penggandanya. Kami melakukan perkara yang sama untuk huruf besar, nombor, dan simbol. Kami kemudian menambah bonus untuk kombinasi, jika hadir, dan menambah penalti jika rentetan itu rata. Berikut adalah setiap negeri. Fungsi utama yang dipanggil div

untuk menukar warna latar belakangnya kembali ke hitam asalnya. Jangan ragu untuk menukar skor asas untuk setiap penarafan. Saya hanya meletakkan nilai -nilai yang tidak saintifik untuk mendapatkan demo. Biar saya jelaskan.

Daripada mengemas kini nilai individu untuk hasil terperinci, saya telah menggunakan hanya mengemas kini nilai HTML lengkap bekas. Saya tahu ia akan menjadi lembap apabila bilangan kotak ini menambah, tetapi mengakses setiap elemen secara individu dan kemudian mengemas kini nilainya untuk demo kecil seolah-olah agak tidak produktif. Oleh itu, jalankan dengan saya di sini. Setiap nilai mendapat fungsi init ()

, dan anda akan baik untuk pergi.

<div id="container"><br><br>  <h1>A simple password strength checker</h1><br><br>  <p>Type in your password to get visual feedback regarding the strength of your password.</p><br>  <p>I assure you, I am not stealing your passwords. The form doesn't not submit. You can look through the source if you are suspicious. :)</p><br><br>  <div class="block"><br>    <input id="password" /><br>    <div id="complexity" class="default">Enter a random value</div><br>  </div><br><br>  <div class="block"><br>    <div id="results" class="default">Breakdown of points</div><br>    <div id="details"></div><br>    <p class="message"></p><br>  </div><br><br></div><br>

Mari lihat apa yang berlaku di sini. Kami mulakan dengan menukar kata laluan kami ke huruf kecil. Selepas itu, kami menukarnya menjadi saiz harta untuk mendapatkan bilangan watak yang unik. Jika bilangan aksara unik kurang daripada atau sama dengan 3, kami menetapkan nilai untuk fungsi analisis () untuk memeriksa corak berulang. Ini akan bergantung pada regex dan periksa sama ada urutan 3 atau lebih aksara alfanumerik diulangi dalam kata laluan. Watak.

anda dapat melihat bahawa pa $$ w0rd $

.default {<br>  background-color: black;<br>}<br>.weak {<br>  background-color: #C62828;<br>}<br>.strong {<br>  background-color: #FF8F00;<br>}<br>.stronger {<br>  background-color: #1976D2;<br>}<br>.strongest {<br>  background-color: #388E3C;<br>}<br><br>span.value {<br>  font-weight: bold;<br>  float: right;<br>}<br><br>p.message {<br>  color: red;<br>  font-weight: bold;<br>}<br>

Atas ialah kandungan terperinci Bina Pemeriksa Kekuatan Kata Laluan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!