Chúng ta bắt đầu tạo form với thẻ htm l:
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="login"> <h3>Login Here</h3> <div id="form"> <form action="" method=""> <label>Username</label> <input type="text" id="username" value="" class="input"> <label> </label> <p> </p> <label>Password</label> <input type="password" id="password" value="" class="input"> <label> </label> <p> </p> <input type="submit" value="Login" id="ok"> <input type="reset" value="reset" id="reset"> </form> </div> <div id="welcome"></div> |
CSS
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| *{ margin: 0px; padding: 0px; } #login{ width: 400px; height: 270px; margin: 0px auto; border: 1px solid #000; } #form{ padding-top: 10px; } h3{ width: 100%; height: 30px; background: #00d8d8; color: #edf8f9; text-indent: 20px; } label{ width: 150px; font-size: 20px; padding-left: 20px; } .input{ width: 200px; height: 30px; line-height: 30px; margin-left: 20px; margin-top: 10px; font-size: 20px; } input[type="submit"]{ float: right; margin-top: 10px; margin-right: 74px; width: 60px; height: 30px; } |
Jquery
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <script type="text/javascript"> $(document).ready(function() { $("#reset").hide(); $("#welcome").hide(); $("#ok").click(function() { if ( $("#username").val().length < 5 ) { $("p").eq(0).html("Username không được ít hơn 5 ký tự"); return false; } else { username = $("#username").val(); $("p").eq(0).html(""); } if ( $("#password").val().length < 6 ) { $("p").eq(1).html("Password không được ít hơn 6 ký tự"); return false; } else { password = $("#password").val(); $("p").eq(1).html(""); } if (username && password) { $("#form").hide(); $("h3").html("Wellcome"); $("#welcome").html("</span>Xin chào: "+username+"</span><br/><a href='#'>Đến trang chủ </a><br/><a href='#' class='reset'>Quay lại đăng nhập </a>").css("text-indent","20px"); $("#welcome").show(); return false; } }) $(".reset").live("click",function() { $("#reset").click(); $("#form").show(); $("#welcome").hide(); }) }) </script> |
Ẩn đi thẻ div chứa id="wellcome" và thẻ input có type="reset".
Code:
1
2
| $("#reset").hide();$("#welcome").hide(); |
Dùng hàm val() để lấy ra giá trị thuộc tính value của thẻ input và hàm length để đếm số ký tự chuỗi nhập vào.
Code :
1
| $("#username").val().length |
Nếu chuỗi nhập vào không thỏa mãn điều kiện cho trước thì sẽ xuất ra dòng thông báo lỗi trong các thẻ p tương ướng và dùng hàm eq() để gọi đến các thẻ p tương ướng này.
Nếu chuỗi nhập vào thỏa mãn điều kiện thì gán giá trị value cho các biến và thông báo sẽ rỗng :
( Lưu ý : ở mỗi lần kiểm tra ta sẽ dùng hàm return flase để dừng việc khi click vào submit thì trang sẽ load lại )
Code :
1
2
3
4
5
6
7
| if ( $("#username").val().length < 5 ) { $("p").eq(0).html("Username không được ít hơn 5 ký tự"); return false; } else { username = $("#username").val(); $("p").eq(0).html(""); } |
Code :
1
2
3
4
5
6
7
| if (username && password) { $("#form").hide(); $("h3").html("Wellcome"); $("#welcome").html("</span>Xin chào: "+username+"</span><br/><a href='#'>Đến trang chủ </a><br/><a href='#' class='reset'>Quay lại đăng nhập </a>").css("text-indent","20px"); $("#welcome").show(); return false; } |
Reset lại dữ liệu nhập vào trước đó bằng hàm click cho thẻ input có type="reset".
Ẩn đi thẻ div chứa id="welcome", và show ra form đăng nhập :
Code :
1
2
3
4
5
| $(".reset").live("click",function() { $("#reset").click(); $("#form").show(); $("#welcome").hide();}) |
0 nhận xét:
Đăng nhận xét