Cara Membuat Password Strength Checker Dengan jQuery
Pemeriksa kekuatan kata sandi sangat penting untuk formulir pendaftaran. Ini memungkinkan Kita mengetahui intensitas kata sandi, apakah itu lemah atau kuat. Jika lemah, Kita hanya perlu memodifikasi dan membuatnya lebih kuat.
Dalam contoh ini kita akan belajar cara membuat pemeriksa kekuatan di jQuery dengan empat tahap kekuatan - "Terlalu pendek, Lemah, Bagus, Kuat" init. Itu memungkinkan siapa pun untuk memilihnya dengan otoritas dan relevansi tinggi .
.
Ingat , kata sandi yang kuat tidak bisa dilanggar dan tidak dapat lacak atau sulit diketahui.
Sebelum memulai dengan kode, saya ingin memberi tahu Anda beberapa kondisi dasar yang menghitung kekuatan kata sandi:
Untuk kata sandi yang kuat, kita harus berhati-hati terhadap karakter khusus bersama dengan kata-kata biasa Anda.
Di bawah ini adalah kode lengkap kami yang berisi file HTML, jQuery dan CSS.
File HTML - passwordscheck.html
Dalam contoh ini kita akan belajar cara membuat pemeriksa kekuatan di jQuery dengan empat tahap kekuatan - "Terlalu pendek, Lemah, Bagus, Kuat" init. Itu memungkinkan siapa pun untuk memilihnya dengan otoritas dan relevansi tinggi .
Ingat , kata sandi yang kuat tidak bisa dilanggar dan tidak dapat lacak atau sulit diketahui.
Baca Juga
Sebelum memulai dengan kode, saya ingin memberi tahu Anda beberapa kondisi dasar yang menghitung kekuatan kata sandi:
- Panjangnya.
- Gunakan Karakter khusus seperti, [@, $].
- Gunakan huruf besar [A - Z] dan huruf kecil [a - z].
- Penggunaan angka [0 - 9].
Di bawah ini adalah kode lengkap kami yang berisi file HTML, jQuery dan CSS.
File HTML - passwordscheck.html
File jQuery - passwordscheck.js
<!DOCTYPE HTML>
<html>
<head>
<title>Password strength checker in jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><!-- jQuery Library-->
<link rel="stylesheet" href="css/passwordscheck.css" /><!-- Include CSS file kamu disini -->
<script src="js/passwordscheck.js"></script><!-- Include jQUery file kamu disini -->
</head>
<body>
<div id="container">
<div id="header">
<h2>Password Strength Checking with jQuery</h2>
<hr>
</div>
<div id="content">
<form id="register">
<label for="password"><b>Password : </b></label>
<input name="password" id="password" type="password" placeholder="Type Your Password here"/>
<span id="result"></span>
</form>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('#password').keyup(function() {
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// Jika kata sandi berisi karakter huruf besar dan kecil, tingkatkan nilai kekuatannya.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// Jika memiliki angka dan karakter, tingkatkan nilai kekuatan.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// Jika memiliki satu karakter khusus, tingkatkan nilai kekuatan.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// Jika memiliki dua karakter khusus, tingkatkan nilai kekuatan
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
// Cek nilai kekuatan, kita dapat memberikan pesan
// Jika nilainya kurang dari 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
File CSS - passwordscheck.css
body{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 15px;
line-height: 1.5;
}
#container {
width: 535px;
background: #ffffff;
padding: 20px;
margin: 90px auto;
border-radius: 5px;
height: 150px;
border: 2px solid gray;
}
#header {
text-align: center;
background-color: #FEFFED;
border-radius: 5px;
margin: -39px -20px 10px -20px;
}
h2{
padding-top: 10px;
}
#content {
margin-left: 57px;
margin-top: 40px;
}
#register label{
margin-right:5px;
}
#register input {
padding: 5px 14px;
border: 1px solid #d5d9da;
box-shadow: 0 0 9px #0E34F5 inset;
width: 272px;
font-size: 1em;
height: 25px;
}
#register .short{
font-weight:bold;
color:#FF0000;
font-size:larger;
}
#register .weak{
font-weight:bold;
color:orange;
font-size:larger;
}
#register .good{
font-weight:bold;
color:#2D98F3;
font-size:larger;
}
#register .strong{
font-weight:bold;
color: limegreen;
font-size:larger;
}
Kesimpulan
Jika kita tidak ingin peretas memecahkan kata sandi kita, berikan yang kuat. Dan, jika Anda ingin tahu apakah kata sandi Anda kuat atau tidak, gunakan pemeriksa kekuatan kata sandi di formulir Anda.
Sehingga, pengguna yang akan mendaftar pada formulir pendaftaran kita akan merasa santai/aman ketika mereka melihat kekuatan kata sandi mereka yang “kuat”.
0 Response to "Cara Membuat Password Strength Checker Dengan jQuery"
Posting Komentar