Tugas/latihan 3 PWEB : Javascript Form Login / SignUp
Source Code Login.html :
Source Code SignUp.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 :
Comments
Post a Comment