Cara Membuat Validasi Password Menggunakan JavaScript
Halo teman-teman di panduan kali ini saya akan menjelaskan mengenai Cara Merancang Validasi Password Menggunakan JavaScript, mungkin teman-teman sering mengerjakan registrasi di sebuah situs atau yang lainya, dan terkadang kita mesti memasukan password sebanyak dua kali dan passwaord yang kita masukan yang pertama-tama mesti sama dengan password yang kedua, validasi ini bertujuan bagi mencocokan antara password yang pertama-tama dengan password yang kedua, misalkan password yang kita masukan pertama-tama yakni qwerty dan password yang kedua pun mesti qwerty, dan sekiranya password yang pertama-tama tak sama dengan password yang kedua karenanya tak akan diproses dan akan tampil pesan error nya.
validasi password ini bertujuan selaku ke amanan dari aplikasi yang telah kita bikin sehingga tak gampang di hack oleh orang lain, validasi password yang akan kita bikin kali ini, kita akan merancang sebuah form dengan menggunakan dua <input type=”password” />, inputan password yang pertama-tama mesti sama dengan inputan yang kedua seperti yang terlihat dibawah ini.
Nah Cara Merancang Validasi Password Menggunakan JavaScript, langkah pertama-tama silahkan teman-teman buka text editornya, dan silahkan teman-teman simpan script dibawah ini dengan mana index.html
<html>
<head>
<title>Cara Merancang Validasi Password Menggunakan JavaScript</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style type=text/css>
.container {width: 500px; margin: auto; background: #afc1b3; padding: 15px;}
.pesan {display:block; font-size:small; margin-top:5px;}
.error {color:red; }
h1 {font-size: 23px; font-weight: bold; text-align: center;}
.fa {cursor: pointer; }
.input {width: 350px; height: 35px; margin: 10px 0 0 0;}
.active, input[type='text'] {width: 350px;height: 35px;margin: 10px 0 0 0;}
</style>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js></script>
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js></script>
</head>
<body>
<div class=container>
<h1>Cara Merancang Validasi Password Menggunakan JavaScript</h1>
<form action=proses.html method= id=frm-mhs>
<label for=pass1 class=pesan>PASSWORD: </label>
<input type=password name=pass1 id=pass1 size=15 class=input required= />
<label for=pass2 class=pesan>ULANGI PASSWORD: <i id=icon class=fa fa-eye-slash></i></label>
<input type=password name=pass2 id=pswd2 size=15 class=input required=/>
<br>
<input type=submit name=Submit value=OK/>
</form>
</div>
<script src=pass.js></script>
</body>
</html>
Berikutnya kita akan merancang proses sekiranya password yang pertama-tama dan yang kedua benar kita akan masuk ke halaman berikutnya, dan silahkan teman-teman simpan script dibawah ini dengan nama proses.html
<style type=text/css>
.container {width: 500px; margin: auto; background: #afc1b3; padding: 15px;}
</style>
<div class=container>
<h1>Kamu Berhasil Masuk</h1>
<input type='submit' value='Back' onclick='window.history.back()''>
</div>
Dan yang terakhir kita akan merancang proses bagi JavaScriptnya dan silahkan teman-teman simpan script dibawah ini dengan nama pass.js
// Proses Validasi Password
$(document).ready(function() {
$('#frm-mhs').validate({
rules: {
pass2: {
equalTo: #pass1
}
},
messages: {
pass2: {
equalTo: <p>Password yang Kamu Masukan Tak Sama</p>
}
}
});
});
// Proses Show Password
var input = document.getElementById('pswd2'),
icon = document.getElementById('icon');
icon.onclick = function () {
if(input.className == 'active') {
input.setAttribute('type', 'text');
icon.className = 'fa fa-eye';
input.className = '';
} else {
input.setAttribute('type', 'password');
icon.className = 'fa fa-eye-slash';
input.className = 'active';
}
}
Berikutnya silahkan teman-teman save seluruh filenya dan sekiranya kita jalankan di browser karenanya hasilnya akan terlihat seperti dibawah ini.
silahkan Klik bagi Demo
Oke teman-teman lumayan gampang bukan Cara Merancang Validasi Password Menggunakan JavaScript-nya demikianlah dulu panduan saya kali ini mengenai Cara Merancang Validasi Password Menggunakan JavaScript, semoga bermanfaat
Terimakasih.
Sumber https://kursuswebsite.org
