[Latihan Kelas Pertemuan 3 Pemrograman Web - Latihan Javascript - Sign Up and Login Form]
- Hilmi Zharfan Rachmadi
- 5025201268
- Pemrograman Web Kelas B
Berikut adalah situs Login dan Sign Up yang saya buat ketika Latihan Kelas Pertemuan 3
<!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.0">
<title>Login Form Basic</title>
</head>
<body>
<h3>LOGIN</h3>
<form="Login_form" onsubmit="submit_form()">
<h4>USERNAME</h4>
<input type="text " placeholder="Enter your email id " />
<h4>PASSWORD</h4>
<input type="password " placeholder="Enter your password " /></br>
</br>
<input type="submit" value="Login " />
<input type="button" value="SignUp " onClick="create() " />
</form>
<script type="text/javascript ">
function submit_form() {
alert("Login successful ");
}
function create() {
window.location = "signup.html ";
}
</script>
</body>
</html>
<!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.0">
<title>SignUp Page</title>
</head>
<body align="center">
<h1>CREATE YOUR ACCOUNT</h1>
<table cellspacing="2" align="center" cellpadding="8" border="0">
<tr>
<td>Name</td>
<td><input type="text" placeholder="Enter your name" id="n1">
</td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" placeholder="Enter your email id" id="e1">
</td>
</tr>
<tr>
<td>Set Password</td>
<td><input type="password" placeholder="Set Password" id="p1">
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" placeholder="Confirm Password" id="p2">
</td>
</tr>
<tr>
<td>
<input type="submit" value="Create" onClick="create_account()">
</td>
</tr>
</table>
<script type="text/javascript">
function create_account() {
var n = document.getElementById("n1").value;
var e = document.getElementById("e1").value;
var p = document.getElementById("p1").value;
var cp = document.getElementById("p2").value;
// Code for password validation
var letters = /^[A-Za-z]+$/;
var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
// other validations required code
if (n == '' || e == '' || p == '' || cp == '') {
alert("Enter each details correctly");
} else if (!letters.test(n)) {
alert('Name is incorrect must contain alphabets only');
} else if (!email_val.test(e)) {
alert('Invalid email format please enter valid email id');
} else if (p != cp) {
alert('Passwords not matching');
} else if (document.getElementById("p1").value.length > 12) {
alert('Password maximum length is 12');
} else if (document.getElementById("p1").value.length < 6) {
alert('Password minimum length is 6');
} else {
alert("Your account has been created succesfully... Redirecting to JavaTpoint.com");
window.location = "https://www.javatpoint.com/";
}
}
</script>
</body>
</html>
Comments
Post a Comment