Membuat Login/register Form Validasi Keamanan dengan JS

Membuat Login/register Form Validasi Keamanan dengan Javascript.  Kali ini zlearn akan berbagi tutorial bagaimana caranya membuat form login menggunkan validasi kemanan password yang harus terdiri dari karakter huruf, karakter kapital, karakter tanda baca, karakter, karakter angka.

http://www.zlearn.id/2017/08/membuat-loginregister-form-validasi.html
Form Validasi Passoword


login/register memerlukan password dan password yang amenggunakan berbagai jenis karakter akan lebih aman dari serangan peretas dan dapat melindungi data-data pengguna sebuah akun oleh karenan itu user diharuskan menggunakan password yang kuat sehingga tidak mudah di bobol atau diretas.

ya langsung masuk ke tutorial bagaimana caranya Membuat Login/register Form Validasi Keamanan dengan JS.  langsung masuk saja ketutorial silahakn simak tutorial dengan seksama:


  • pertama buka teks editor anda terserah bisa menggunakan notepad, gedit, sublime dan sebagainya.
  • Kemudian ketikan kode/script dibawah ini



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Validasi password</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        /* Base CSS */
.alignleft {
    float: left;
    margin-right: 15px;
}
.alignright {
    float: right;
    margin-left: 15px;
}
.aligncenter {
    display: block;
    margin: 0 auto 15px;
}
a:focus { outline: 0 solid }
img {
    max-width: 100%;
    height: auto;
}
.fix { overflow: hidden }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}
html,
body { height: 100% }

a {
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #333;
}
a:hover { text-decoration: none }



.search-box{margin:80px auto;position:absolute;}
.caption{margin-bottom:50px;}
.loginForm input[type=text], .loginForm input[type=password]{
margin-bottom:10px;
}
.loginForm input[type=submit]{
background:#046dfb;
color:#fff;
font-weight:700;
}


#pswd_info {
background: #dfdfdf none repeat scroll 0 0;
color: #fff;
left: 20px;
position: absolute;
top: 115px;
}
#pswd_info h4{
    background: black none repeat scroll 0 0;
    display: block;
    font-size: 14px;
    letter-spacing: 0;
    padding: 17px 0;
    text-align: center;
    text-transform: uppercase;
}
#pswd_info ul {
    list-style: outside none none;
}
#pswd_info ul li {
   padding: 10px 45px;
}



.valid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px;
color: green;
line-height: 21px;
padding-left: 22px;
}

.invalid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px;
color: red;
line-height: 21px;
padding-left: 22px;
}


#pswd_info::before {
    background: #dfdfdf none repeat scroll 0 0;
    content: "";
    height: 25px;
    left: -13px;
    margin-top: -12.5px;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 25px;
}
#pswd_info {
    display:none;
}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="search-box">
<div class="caption">
<h3>Login Validasi Kemanan</h3>
<p>Validasi Password</p>
</div>
<form action="" class="loginForm">
<div class="input-group">
<input type="text" id="name" class="form-control" placeholder="Full Name">
<input type="password" id="paw" class="form-control" placeholder="Password">
<input type="submit" id="submit" class="form-control" value="Submit">
</div>
</form>
</div>
</div>
<div class="col-md-4">
<div class="aro-pswd_info">
<div id="pswd_info">
<h4>Password must be requirements</h4>
<ul>
<li id="letter" class="invalid">Menggunakan <strong>Huruf</strong></li>
<li id="capital" class="invalid">Menggunakan  <strong>Huruf Kapital</strong></li>
<li id="number" class="invalid">Menggunakan <strong>Angka</strong></li>
<li id="length" class="invalid">Minimal <strong>8 characters</strong></li>
<li id="space" class="invalid">Menggunakan <strong> tanada [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=password]').keyup(function() {
var pswd = $(this).val();
//validate the length
if ( pswd.length < 8 ) {
$('#length').removeClass('valid').addClass('invalid');
} else {
$('#length').removeClass('invalid').addClass('valid');
}
//validate letter
if ( pswd.match(/[A-z]/) ) {
$('#letter').removeClass('invalid').addClass('valid');
} else {
$('#letter').removeClass('valid').addClass('invalid');
}

//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
$('#capital').removeClass('invalid').addClass('valid');
} else {
$('#capital').removeClass('valid').addClass('invalid');
}

//validate number
if ( pswd.match(/\d/) ) {
$('#number').removeClass('invalid').addClass('valid');
} else {
$('#number').removeClass('valid').addClass('invalid');
}
//validate space
if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
$('#space').removeClass('invalid').addClass('valid');
} else {
$('#space').removeClass('valid').addClass('invalid');
}
}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});
});
</script>
</body>
</html>




  • Kemudian simpan dengan nama index.html
  •  Sekarang coba buka dan jalankan di browsur anda dan lihat hasilnya
sekian tutorial mengenai cara membuat Membuat Login/register Form Validasi Keamanan dengan JS.  semga dapat bermanfaat dan menambah  wawasan kita.

Baca Juga:

  • Membuat Loogin
  • Membuat Register
  • Validasi Password
  • Validasi Kemanan Password
  • Form Kemanan Password


Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...