Yêu cầu: Thiết kế form có nội dung sau: Sử dụng Javascript để kiểm tra thông tin nhập : - Tên đăng nhập không được phép rỗng - Mật khẩu phải chứa ít nhất 5 ký tự - Mật khẩu nhập lại phả
Trang 1KHOA CÔNG NGH Ệ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN
2007 Authored by: Lương Vĩ Minh
Môn : Lập trình và Thiết kế Web 1
Trang 2Môn : Lập trình và Thiết kế Web 1
Trang 35
1 Yêu cầu:
Thiết kế form có nội dung sau:
Sử dụng Javascript để kiểm tra thông tin nhập :
- Tên đăng nhập không được phép rỗng
- Mật khẩu phải chứa ít nhất 5 ký tự
- Mật khẩu nhập lại phải trùng với mật khẩu
Trang 42 Hướng dẫn thiết kế Form
Bước 1: Tạo nền cho form
Insert
Form chọn
Form
Mã lệnh HTML tương ứng cho việc tạo một Form:
<form method="POST">
</form>
Bước 2 : Thiết kế table
Từ menu
Insert Table
* Table phải
nằm trong
Form
Trang 55
Bước 3: Tạo các controls và text theo mẫu đã yêu c ầu
TEXT BOX Control
<input type="text" name="……" >
line <inputname="textTenDN" type="text" >
2 textMatKhau 15 Password <input type="password"
name="textMatKhau" >
3 textMatKhauGoLai 15 Password <input type="password"
name="textMatKhauGoLai" >
BUTTON Control
<input type="submit" value="……" name="……">
STT Button
1 btDangky Đăng ký Submit <inputname="btDangky" type="submit" value="Đăng ký" >
2 btXoa Xóa Reset <input type="reset" value="Xóa" name="btXoa">
Trang 6Kết quả :
Bước 4: Kiểm tra kết quả thực hiện
IE
Trang 75
3 Hướng dẫn sử dụng Javascript
- Bước 1 : Thống nhất tên các controls sử dụng trong form trên
- Bước 2 : Tạo một trang web bất kỳ có tên Dangkythanhcong.htm Trang web này sẽ
hiện thị khi người dùng nhấn vào nút “Đăng ký” và việc kiểm tra dữ liệu thành công
- Bước 3 : Đặt tên cho Form là DKUser
- Bước 4 : Nhập đoạn Javascript vào trong tab <head>
<form name= "DKUser" method= "POST">
Trang 8- Bước 5 : gọi hàm kiểm tra khi bấm vào nút submit Tại phần khai báo thẻ <form> của
trang web, s ửa lại mã lệnh sau:
<form name= "DKUser" method= "POST">
<form name= "DKUser" method= "POST" action= "Dangkythanhcong.htm" onsubmit= " return
KiemTra()">
o Thuộc tính name: Đặt tên cho form đang sử dụng
o Thuộc tính method: Chọn hình thức truyền dữ liệu với server (Post/Get)
o Thuộc tính action: Chỉ định địa chỉ URL được gọi khi button (có thuộc tính submit) được nhấn
o Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc
tính submit) được nhấn Nếu hàm trả về giá trị False thì thuộc tính action bị bỏ qua và ngược lại
- Bước 6 : Kiểm tra kết quả trang web
o Lưu trang web lại
o Nhấn F12 để mở trang web bằng IE
o Tạo các trường hợp nhập dữ liệu khác nhau để kiểm tra kết quả trang web:
Lần 1: Tên đăng nhập bị bỏ trống
Trang 95
Lần 2: Mật khẩu bị bỏ trống
Lần 3: Mật khẩu ngắn hơn 5 ký tự
Lần 4: Gõ lại mật khẩu bị bỏ trống
Lần 5: Nhập đầy đủ, đúng các thông tin cần thiết
Tìm hiểu thêm các control khác (listbox, combo box, radio Button, checkbox, …) và thuộc tính
của nó Hoàn thành đầy đủ form đăng ký theo yêu cầu