Halo teman-teman pada tutorial kali ini saya akan menjelaskan tentang Cara Membuat Validasi Password Menggunakan JavaScript, mungkin teman-teman sering melakukan registrasi pada sebuah website atau yang lainya, dan terkadang kita harus memasukan password sebanyak dua kali dan passwaord yang kita masukan yang pertama harus sama dengan password yang kedua, validasi ini bertujuan untuk mencocokan antara password yang pertama dengan password yang kedua, misalkan password yang kita masukan pertama adalah qwerty dan password yang kedua juga harus qwerty, dan jika password yang pertama tidak sama dengan password yang kedua maka tidak akan diproses dan akan tampil pesan error nya.
validasi password ini bertujuan sebagai ke amanan dari sistem yang telah kita buat sehingga tidak mudah di hack oleh orang lain, validasi password yang akan kita buat kali ini, kita akan membuat sebuah form dengan menggunakan dua <input type=”password” />, inputan password yang pertama harus sama dengan inputan yang kedua seperti yang terlihat dibawah ini.
Nah Cara Membuat Validasi Password Menggunakan JavaScript, langkah pertama silahkan teman-teman buka text editornya, dan silahkan teman-teman simpan script dibawah ini dengan mana index.html
<html>
<head>
<title>Cara Membuat 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 Membuat 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 membuat proses jika password yang pertama 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>Anda Berhasil Masuk</h1>
<input type='submit' value='Back' onclick='window.history.back()''>
</div>Dan yang terakhir kita akan membuat proses untuk 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 Anda Masukan Tidak 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 semua filenya dan jika kita jalankan pada browser maka hasilnya akan terlihat seperti dibawah ini.
silahkan Klik untuk Demo
Oke teman-teman cukup mudah bukan Cara Membuat Validasi Password Menggunakan JavaScript-nya sekian dulu tutorial saya kali ini tentang Cara Membuat Validasi Password Menggunakan JavaScript, semoga bermanfaat
Terimakasih.
The post Cara Membuat Validasi Password Menggunakan JavaScript appeared first on Kursus Website Terbaik.