Pada kesempatan sebelumnya saya pernah membahas tentang membuat progress bars, nah sekarang kita akan belajar membuat check password dengan tampilan progress bars, jadi seberapa kuat password yang dibuat. Tentu banyak sekali design untuk mengukur kekuatan password dimana saat kita memasukan sebuah password. Apa masih ada yang bingung ,bagaimana kalau dimulai cara membuatnya.Baiklah langkah pertama siapkan file html dimana saya disini menggunakan template bootstrap agar mudah untuk membuat tampilannya berikut strukturnya:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Check Password Strength View Progress Bars</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <form> <div class="form-group"> <label for="InputEmail">Email address</label> <input type="email" class="form-control" id="myemail" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="InputPassword">Password</label> <input type="password" class="form-control" id="InputPassword" placeholder="Password"> <input type="checkbox" name="" id="show"><span> Show Password</span><small> <progress max="100" value="0" id="strength" style="width: 100%"></small> </progress> <br> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <div class="col-md-3"></div> </div> </div> |
jadi pada struktur diatas pada form input password saya berikan ID = InputPassword dan tag progress untuk tampilan progress bars.
Langkah selanjutnya menambahkan script dari Javascript seperti dibawah ini :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<script type="text/javascript"> var pass = document.getElementById("InputPassword") pass.addEventListener('keyup', function(){ checkPassword(pass.value) }) var all = document.getElementById('show') all.addEventListener('click', function(){ if(all.checked){ pass.setAttribute('type', 'text') }else { pass.setAttribute('type', 'password') } }) function checkPassword(InputPassword){ var strengthBar = document.getElementById("strength") var strength = 0; // Jika input karakter seperti dalam tanda bracket 1 if (InputPassword.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)){ strength += 1 } // Jika input karakter seperti dalam tanda bracket 2 if (InputPassword.match(/[~<>?]+/)){ strength += 1 } // Jika input karakter seperti dalam tanda bracket 3 if (InputPassword.match(/[!@#$%^&*()]+/)){ strength += 1 } if (InputPassword.length > 5) { strength += 1 } switch(strength){ // akan menampilkan status progress bars sesuai Jika input sesuai karakter seperti dalam tanda bracket case 0: strengthBar.value = 10; break case 1: strengthBar.value = 30; break case 2: strengthBar.value = 50; break case 3: strengthBar.value = 70; break case 4: strengthBar.value = 100; break } } </script> |
Apabila sudah mari kita coba jalankan pada browser ,maka akan seperti dibawah ini tampilnannya :
Jika dilihat pada gambar sebelah kiri karakter yang terdapat form input kurang dari ukuran kekuatan password dibanding dengan gambar sebelah kanan lebih kuat karakter yang diketikkan, karena didalamnya sudah mewakili karakter yang terdapat pada 3 buah karakarter didalam bracket yang dipakai. Kesimpulannya saat membuat password harus kompleks karakter didalamnya supaya tidak mudah diketahui orang lain.
Demikian pembahasan artikel tentang Cara Membuat View Bars Strength Password Dengan Javascript, semoga bermanfaat dan selamat mencoba.
terima kasih.