Sử dụng Form + Javascript

Chia sẻ: Abcdef_15 Abcdef_15 | Ngày: | Loại File: PDF | Số trang:9

Thêm vào BST

Báo xấu

118
lượt xem 21
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Sử dụng Form + Javascript

Bài 5 : Sử dụng Form + Javascript Môn : Lập trình và Thiết kế Web 1 KHOA CÔNG NGHỆ THÔNG TIN – ĐẠI HỌC KHOA HỌC TỰ NHIÊN 2007 Authored by: Lương Vĩ Minh
Bài 5 : Sử dụng Form + Javascript Môn : Lập trình và Thiết kế Web 1 Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 1
1. Y êu c ầ u: Thiết kế form có nội dung sau: Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 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 2
2. H ướ ng d ẫ n thi ế t k ế F orm B ướ c 1 : T ạ o n ề n cho form Từ menu Insert  Form  chọn Form. Mã lệnh HTML tương ứng cho việc tạo một Form: method="POST">
B ướ c 3 : T ạ o các controls và text theo m ẫu đã yêu c ầ u. TEXT BOX Control STT TextField Char Type HTML Code width 1 textTenDN 20 Single 2 textMatKhau 15 Password 3 textMatKhauGoLai 15 Password … … … … … BUTTON Control Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 STT Button Value Action HTML Code name 2 btXoa Xóa Reset 4
Kết quả : B ướ c 4 : Ki ể m tra k ế t qu ả t h ự c hi ệ n. Lưu trang web lại. Nhấn F12 để xem trang web bằng trình duyệt web - IE. Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 5
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. - Loại control STT Tên control textTenDN 1 Textbox textMatkhau Textbox 2 textMatkhaugolai Textbox 3 btDangky 4 Button btXoa 5 Button 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 - Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 6
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ẻ của - trang web, sửa lại mã lệnh sau: Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 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) o được nhấn. Thuộc tính onsubmit: Chỉ định hàm KiemTra() sẽ được gọi khi button (có thuộc o 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. 7
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.  Bài t ậ p th ự c hành: 4. 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. Bài 5 : Sử dụ ng Form + Javascript | 9/26/2007 8