Free Source Code bikin password di HTML
Source Code bagaimana cara bikin password di HTML
Silahkan Copy Source Code di bawah ini dan jalan kan di perangkat anda
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Strength Password Sederhana </title>
<!-- Link CSS Bootstrapt 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Link CSS Font Awessom -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Jquery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Style Css Tambahan -->
<style>
body {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.form-kotak {
width: 40%;
padding: 30px;
margin: 150px auto;
}
.pendek {
color: #FF0000;
font-size: 10pt;
}
.lemah {
color: rgb(255, 0, 0);
font-size: 10pt;
}
.bagus {
color: rgb(255, 166, 0);
font-size: 10pt;
}
.kuat {
color: rgb(22, 207, 22);
font-size: 10pt;
}
</style>
</head>
<body>
<div class="form-kotak">
<form>
<div class="form-group">
<label> Password </label>
<div class="input-group" id="show_hide">
<input type="password" class="form-control" id="txt-password" placeholder="masukkan password ...">
<div class="input-group-prepend">
<span id="icon-show" class="input-group-text">
<i id="icon-show-hide" class="fa fa-eye-slash" aria-hidden="true"></i>
</span>
</div>
</div> <br>
<span id="hasil-kekuatan"></span>
</div>
</form>
</div>
</body>
<script>
$(document).ready(function() {
// Show Hide Password
$("#icon-show").on('click', function(event) {
event.preventDefault();
if ($('#txt-password').attr("type") == "text") {
$('#txt-password').attr('type', 'password');
$('#icon-show-hide').addClass("fa-eye-slash");
$('#icon-show-hide').removeClass("fa-eye");
} else if ($('#txt-password').attr("type") == "password") {
$('#txt-password').attr('type', 'text');
$('#icon-show-hide').removeClass("fa-eye-slash");
$('#icon-show-hide').addClass("fa-eye");
}
})
// kekuatan Password
$('#txt-password').keyup(function() {
var passwordku = $('#txt-password').val();
var nilai_kekuatan = 0;
var angka = /([0-9])/;
var huruf = /([a-zA-Z])/;
var spesial = /([!,%,&,@,#,$,^,*,?,_,~])/;
if (passwordku.length < 6) {
$("#hasil-kekuatan").html("<div class='alert alert-danger' role='alert'>Password Terlalu Pendek</div>");
} else {
// nilai kekuatan password akan bertambah 1 sesuai kondisinya
if (passwordku.length > 7) {
nilai_kekuatan += 1
}
if (passwordku.match(angka * angka)) {
nilai_kekuatan += 1
}
if (passwordku.match(angka) && passwordku.match(huruf)) {
nilai_kekuatan += 1
}
if (passwordku.match(spesial)) {
nilai_kekuatan += 1
}
if (passwordku.match(spesial * spesial)) {
nilai_kekuatan += 1
}
// menghitung kekuatan password
if (nilai_kekuatan < 2) {
$("#hasil-kekuatan").html("<div class='alert alert-danger' role='alert'>Password Lemah</div>");
} else if (nilai_kekuatan == 2) {
$("#hasil-kekuatan").html("<div class='alert alert-warning' role='alert'>Password Sudah Bagus</div>");
} else {
$("#hasil-kekuatan").html("<div class='alert alert-success' role='alert'>Password Sudah Kuat</div>");
}
}
})
});
</script>
</html>
Contoh di tampilan layar
Silahkan Copy Source Code di bawah ini dan jalan kan di perangkat anda
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Strength Password Sederhana </title>
<!-- Link CSS Bootstrapt 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Link CSS Font Awessom -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Jquery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Style Css Tambahan -->
<style>
body {
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.form-kotak {
width: 40%;
padding: 30px;
margin: 150px auto;
}
.pendek {
color: #FF0000;
font-size: 10pt;
}
.lemah {
color: rgb(255, 0, 0);
font-size: 10pt;
}
.bagus {
color: rgb(255, 166, 0);
font-size: 10pt;
}
.kuat {
color: rgb(22, 207, 22);
font-size: 10pt;
}
</style>
</head>
<body>
<div class="form-kotak">
<form>
<div class="form-group">
<label> Password </label>
<div class="input-group" id="show_hide">
<input type="password" class="form-control" id="txt-password" placeholder="masukkan password ...">
<div class="input-group-prepend">
<span id="icon-show" class="input-group-text">
<i id="icon-show-hide" class="fa fa-eye-slash" aria-hidden="true"></i>
</span>
</div>
</div> <br>
<span id="hasil-kekuatan"></span>
</div>
</form>
</div>
</body>
<script>
$(document).ready(function() {
// Show Hide Password
$("#icon-show").on('click', function(event) {
event.preventDefault();
if ($('#txt-password').attr("type") == "text") {
$('#txt-password').attr('type', 'password');
$('#icon-show-hide').addClass("fa-eye-slash");
$('#icon-show-hide').removeClass("fa-eye");
} else if ($('#txt-password').attr("type") == "password") {
$('#txt-password').attr('type', 'text');
$('#icon-show-hide').removeClass("fa-eye-slash");
$('#icon-show-hide').addClass("fa-eye");
}
})
// kekuatan Password
$('#txt-password').keyup(function() {
var passwordku = $('#txt-password').val();
var nilai_kekuatan = 0;
var angka = /([0-9])/;
var huruf = /([a-zA-Z])/;
var spesial = /([!,%,&,@,#,$,^,*,?,_,~])/;
if (passwordku.length < 6) {
$("#hasil-kekuatan").html("<div class='alert alert-danger' role='alert'>Password Terlalu Pendek</div>");
} else {
// nilai kekuatan password akan bertambah 1 sesuai kondisinya
if (passwordku.length > 7) {
nilai_kekuatan += 1
}
if (passwordku.match(angka * angka)) {
nilai_kekuatan += 1
}
if (passwordku.match(angka) && passwordku.match(huruf)) {
nilai_kekuatan += 1
}
if (passwordku.match(spesial)) {
nilai_kekuatan += 1
}
if (passwordku.match(spesial * spesial)) {
nilai_kekuatan += 1
}
// menghitung kekuatan password
if (nilai_kekuatan < 2) {
$("#hasil-kekuatan").html("<div class='alert alert-danger' role='alert'>Password Lemah</div>");
} else if (nilai_kekuatan == 2) {
$("#hasil-kekuatan").html("<div class='alert alert-warning' role='alert'>Password Sudah Bagus</div>");
} else {
$("#hasil-kekuatan").html("<div class='alert alert-success' role='alert'>Password Sudah Kuat</div>");
}
}
})
});
</script>
</html>
Contoh di tampilan layar
0 Response to "Free Source Code bikin password di HTML"
Post a Comment