Cara Membuat Regular Expresion Untuk Mengukur Kekuatan Password

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Membuat Regular Expresion Untuk Mengukur Kekuatan Password.

Sebelumnya kita harus mengetahui apa itu Regular Expresion. Regular Expresion adalah suatu pola untuk mencocokan text tertentu. Pada tutorial kali ini kita akan coba Membuat Regular Expresion Untuk Mengukur Kekuatan Password menggunakan javascript.

Pertama kita harus tau dulu apa itu Javascript. JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Nah, Sekarang saya akan memberi tutorial singkat tentang bagaimanaÂ Cara Membuat Regular Expresion Untuk Mengukur Kekuatan Password.

â€“ Pertama teman-teman download framework bootstrapnya dulu.

â€“ Kedua buka text editor teman-teman lalu buka file bootstrap yang telah kita download dan buat file index.html dengan cara mengcopy default html yang sudah ada di website bootstrap, jangan lupa save di dalam folder bootstrap teman-teman

â€“ Ketiga kita buat kode html-nya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Home</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>
  <body>
  
  <center>
  	<form name="password_strength" method="POST" id="pass_form">
      <label>Enter a password</label>
      <input type="password" name="pass" id="pass" />
      <span id="passstrength"></span>
    </form>
  </center>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  
  </body>
</html>

â€“ Keempat kita masukan css untuk merapikan saja dan simpan di folder css bootstrap dengan nama custom.css jangan lupa panggil menggunakan tag link untuk menyambungkan dengan htmlnya:

    
#pass_form {
margin:10px;
}
label {
    font-family:verdana;
    font-size:10px;
}
input {
    padding:2px;
    color:gray;
}
#passstrength {
    color:red;
    font-family:verdana;
    font-size:10px;
    font-weight:bold;
}

Maka hasilnya akan menjadi seperti ini:

â€“ Kelima kita buat javascriptnya, dan save di dalam folder js dengan nama file pass.js di bootstrap:

 $('#pass').keyup(function(e) {
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
     var enoughRegex = new RegExp("(?=.{6,}).*", "g");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

â€“ Keenam kita panggil file pass.js dengan cara memasukan script dibawah script jquery bawaan bootstrap sebelum penutup body :

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/pass.js"></script>

Hasilnya akan seperti ini apabila kita ketikan password:

Bagaimana teman-teman cukup mudahkan Membuat Regular Expresion Untuk Mengukur Kekuatan Password.

Sekian artikel saya hari ini tentang Cara Membuat Regular Expresion Untuk Mengukur Kekuatan Password.

Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Regular Expresion Untuk Mengukur Kekuatan Password

Kategori