Validasi Password Menggunakan JavaScript

Jody Krido Juli 18, 2020

Halo semuanya sekrang saya akan memberikan cara untuk validasi password yang dimana password itu harus memiliki ketentuan seperti harus panjang lebih delapan karakter, harus menggunakan angka, harus menggunakan huruf besar dan kecil. yang dimana ketentuan itu sangat diperlukan untuk membuat password terlihat unik agar tidak bisa mudah dipakai orang lain. maka dari pada itu saya akan memberitau bagaimana cara membuat validasi untuk password tersebut menggunakan javascript dengan hasilnya seperti berikut.

Kurang lebih hasilnya seperti diatas. Untuk langkah pembuatanya seperti berikut ini.
  1. Pertama buat file index.html untuk halaman webnya lalu ketikan code html berkut. 
    <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <form action="/action_page.php">
            <label for="psw">Password</label>
            <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                required>
            <input type="submit" value="Submit">
        </form>
    </div>

    <div id="message">
        <h3>Kata sandi harus mengandung yang berikut:</h3>
        <p id="letter" class="invalid">Huruf kecil</p>
        <p id="capital" class="invalid">Huruf kapital (huruf besar)</p>
        <p id="number" class="invalid">Sebuah angka</p>
        <p id="length" class="invalid">Minimal 8 karakter</p>
    </div>

    <script src="script.js"></script>

</body>

</html>
  2. Selanjutnya buat file style.css untuk memperindah halaman webnya lalu, ketikan code css berkut. 
    *{
    font-family: Arial, Helvetica, sans-serif;
}
input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
}
.container {
    background-color: #f1f1f1;
    padding: 20px;
    width: 500px;
    margin: auto;
}
#message {
    display: none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 20px;
    margin-top: 10px;
    width: 500px;
    margin: auto;
}

#message p {
    padding: 10px 35px;
    font-size: 18px;
}

.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -35px;
}
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -35px;
}
  3. Setelah itu buat file script.js untuk JavaScriptnya berfungsi sebagai validasi untuk passwordnya, lalu ketikan code javascript berikut. 
    var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");

myInput.onfocus = function () {
    document.getElementById("message").style.display = "block";
}

myInput.onblur = function () {
    document.getElementById("message").style.display = "none";
}

myInput.onkeyup = function () {
    var lowerCaseLetters = /[a-z]/g;
    if (myInput.value.match(lowerCaseLetters)) {
        letter.classList.remove("invalid");
        letter.classList.add("valid");
    } else {
        letter.classList.remove("valid");
        letter.classList.add("invalid");
    }

    var upperCaseLetters = /[A-Z]/g;
    if (myInput.value.match(upperCaseLetters)) {
        capital.classList.remove("invalid");
        capital.classList.add("valid");
    } else {
        capital.classList.remove("valid");
        capital.classList.add("invalid");
    }

    var numbers = /[0-9]/g;
    if (myInput.value.match(numbers)) {
        number.classList.remove("invalid");
        number.classList.add("valid");
    } else {
        number.classList.remove("valid");
        number.classList.add("invalid");
    }

    if (myInput.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
    } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
    }
}
  4. Langkah terakhir tinggal melihat hasilnya dengan cara buka file index.html dibrowser. 
Kurang lebih seperti itu langkah langkahnya untuk membuat validasi password menggunakan javascript. jika kalian maenginginkan nya silahkan download source code dibawah ini.


Sekian itu saja dari saya, jika ada kekurangan dari postingan diatas silahkan komentar dibawah. Terimakasih.  

Sumber : w3schools.com
   
Tags

Posting Komentar

0 Komentar