Tugas/latihan 3 PWEB : Javascript Form Login / SignUp

Source Code Login.html :
1:  <html>  
2:    <head>  
3:      <title>Login Form</title>  
4:    </head>  
5:    <body>  
6:      <h3>  
7:        Login  
8:      </h3>  
9:      <formform="Login_form" onsubmit="submit_form()">  
10:      <h4>USERNAME</h4>  
11:      <input type="text" placeholder="Enter your email id" />  
12:      <h4>PASSWORD</h4>  
13:      <input type="text" placeholder="Enter your Password" /></br></br>  
14:      <input type="submit" value="login" />  
15:      <input type="button" value="SignUp" onClick="create()" />  
16:      </form>  
17:      <script type="text/javascript">  
18:        function submit_form() {  
19:          alert("login successfully");  
20:        }  
21:        function create() {  
22:          window.location = "signup.html";  
23:        }  
24:      </script>  
25:    </body>  
26:  </html>  

Source Code SignUp.html :

1:  <html>  
2:    <head>  
3:      <title> SignUp Page</title>  
4:    </head>  
5:    <body align="center">  
6:      <h1> Create Your Account</h1>  
7:      <table cellspacing="2" align="center" cellpadding="8" border="0">  
8:        <tr><td> Name</td>  
9:          <td><input type="text" placeholder="Enter your name" id="n1"></td></tr>  
10:        <tr><td> Email</td>  
11:          <td><input type="text" placeholder="Enter your email" id="e1"></td></tr>  
12:        <tr><td> Set Password</td>  
13:          <td><input type="text" placeholder="set your password" id="p1"></td></tr>  
14:        <tr><td> Confirm password</td>  
15:          <td><input type="text" placeholder="confirm your name" id="p2"></td></tr>  
16:        <tr><td>  
17:          <input type="submit" value="create" onClick="create_account()" />  
18:        </table>  
19:          <script type="text/javascript">  
20:            function create_account(){  
21:              var n=document.getElementById("n1").value;  
22:              var e=document.getElementById("e1").value;  
23:              var p=document.getElementById("p1").value;  
24:              var cp=document.getElementById("p2").value;  
25:              //Code untuk validasi password  
26:              var letters = /^[A-Za-z]+$/;  
27:              var email_val = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2, 4})+$/;  
28:              //Validasi yang menggunakan code lainya  
29:              if(n==''||e==''||p==''||cp==''){  
30:                alert("enter each details correctly");  
31:              }  
32:              else if(!letters.test(n)){  
33:                alert("name is incorrect must contain alphabets only!");  
34:              }  
35:              else if(!email_val.test(e)){  
36:                alert("invalid email format please enter valid email id!");  
37:              }  
38:              else if(p!=cp){  
39:                alert("passwords not matching");  
40:              }  
41:              else if(document.getElementById("p1").value.length > 12){  
42:                alert("password maximum length is 12");  
43:              }  
44:              else if(document.getElementById("p1").value.length < 6){  
45:                alert("password minimum length is 6");  
46:              }  
47:              else{  
48:                alert("your account has been created successfully... Redirecting to JavaTpoint.com");  
49:                window.location="https://www.javatpoint.com/";  
50:              }  
51:            }  
52:          </script>  
53:    </body>  
54:  </html>  
Tampilan halaman login.html :

Tampilan Halaman signup.html :





Comments

Popular posts from this blog

Quiz 1 : MPPL B

Tugas 1 - Rekayasa Kebutuhan