Tugas 3 - JavaScript
Nama : Agnesfia Anggraeni
NRP : 50252010159
Kelas : Pemrograman Web C
Tahun : 2022/2023
Tugas 3 Membuat Javascript Form
Hasil Login Form :
Hasil SignUp Form :
Login Form :
<html>
<head>
<title> Login Form</title>
</head>
<body align="center">
<h3 > LOGIN</h3>
<formfrom="Login_form" onsubmit="submit_form()">
<h4> USERNAME</h4>
<input type="text" placeholder="Enter your 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 successfully");
}
function create(){
window.location =" signup.html";
}
</script>
</body>
</html>
SignUp Form :
<html>
<head>
<title> SignUp Page</title>
</head>
<body align="center">
<h1 align="center"> 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;
// Code for 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("Password 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("Ypur account has been successfully... Redirecting to JavaTpoint.com");
window.location="https://www.javapoint.com/";
}
</script>
</body>
</html>
Komentar
Posting Komentar