tugas 3 pemrograman web- Latihan javascript
pada pertemuan hari ini,mahasiswa diberi tugas untuk membuat halaman pembuatan akun menggunakan javascript.
Tampilan :
.png)
.png)
Code :
form.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> Login Form</title>
</head>
<body align="center">
<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"/>
<input type="submit" value="login"/>
<input type="button" value="SignUp" onclick="create()"/>
</form>
<script type="text/javascript">
function submit_form() {
alert("Login success");
}
function create() {
window.location = "signup.html";
}
</script>
</body>
</html>
<html>
<head>
<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 a password"
id="p1"></td></tr>
<tr><td>Confirm Password</td>
<td><input type="password" placeholder="Confirm your 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;
//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(p!=cp) {
alert("Password not matching");
}
else if(document.getElementById("p1").value.lenght > 12) {
alert("Password maximum length is 12");
}
else if(document.getElementById("p1").value.lenght < 6) {
alert("Password minimum lenght is 6");
}
else {
alert("Your account has been created successfully...Redirecting to JavaTpoint.com");
window.location = "https://www.JavaTpoint.com/";
}
}
function login() {
window.location = "form.html";
}
</script>
</body>
Code diatas juga dapat diakses melalui repository berikut :
Komentar
Posting Komentar