bài 6: tạo hiệu ứng và validate form - giáo trình fpt
DESCRIPTION
Viết mã tạo các hiệu ứng Hiệu ứng Image Rollover Hiệu ứng SlideShow Thao tác với các điều khiển SelectBox CheckBox RadioButton Form Kiểm tra tính hợp lệ cho Form Mục tiêu bài học Viết mã tạo các hiệu ứng Hiệu ứng Image Rollover Hiệu ứng SlideShow Thao tác với các điều khiển SelectBox CheckBox RadioButton Form Kiểm tra tính hợp lệ cho FormTRANSCRIPT
Bài 6:Tạo hiệu ứng và validate Form
Giới thiệu về mô hình Document Object ModelGiới thiệu về HTML DOMCấu trúc DOMThuộc tính của nodePhương thức của node
Truy cập đến nodeThêm nodeXóa node
Truy cập và thay đổi style của các elementĐối phó với các trình duyệt khác nhau
Hệ thống bài cũ
Giới thiệu về mô hình Document Object ModelGiới thiệu về HTML DOMCấu trúc DOMThuộc tính của nodePhương thức của node
Truy cập đến nodeThêm nodeXóa node
Truy cập và thay đổi style của các elementĐối phó với các trình duyệt khác nhau
Tạo hiệu ứng và validate Form 2
Viết mã tạo các hiệu ứngHiệu ứng Image RolloverHiệu ứng SlideShow
Thao tác với các điều khiểnSelectBoxCheckBoxRadioButtonForm
Kiểm tra tính hợp lệ cho Form
Mục tiêu bài học
Viết mã tạo các hiệu ứngHiệu ứng Image RolloverHiệu ứng SlideShow
Thao tác với các điều khiểnSelectBoxCheckBoxRadioButtonForm
Kiểm tra tính hợp lệ cho Form
Tạo hiệu ứng và validate Form 3
CÁC HIỆU ỨNG
Biến và toán tử 4
CÁC HIỆU ỨNG
Image Rollover là hiệu ứng thay đổi ảnh khi di chuột lênảnh
Image Rollover
Tạo hiệu ứng và validate Form 5
Ảnh hiện lên khichạy ứng dụng
Ảnh hiện lên khi dichuột lên ảnh
Thực hiện hiệu ứng này bằng cách xử lý sự kiệnonMouseOver và onMouseOut cho thẻ img
onMouseOver: sự kiện được kích hoạt khi người dùng di chuộtlên ảnhonMouseOut: sự kiện được kích hoạt khi người dùng di chuột rangoài ảnh
Tạo hiệu ứng Rollover
Thực hiện hiệu ứng này bằng cách xử lý sự kiệnonMouseOver và onMouseOut cho thẻ img
onMouseOver: sự kiện được kích hoạt khi người dùng di chuộtlên ảnhonMouseOut: sự kiện được kích hoạt khi người dùng di chuột rangoài ảnh
Tạo hiệu ứng và validate Form 6
Demo Rollover
<html><head><script type="text/javascript">
function onMouseOverEvent() {document.img_hoa.src = "hoaover.jpg";
}function onMouseOutEvent() {
document.img_hoa.src = "hoaout.jpg";}
</script></head><body><img name="img_hoa" src="hoaout.jpg"onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body></html>
Truy cập đến phầntử bằng attribute
name
Tạo hiệu ứng và validate Form 7
<html><head><script type="text/javascript">
function onMouseOverEvent() {document.img_hoa.src = "hoaover.jpg";
}function onMouseOutEvent() {
document.img_hoa.src = "hoaout.jpg";}
</script></head><body><img name="img_hoa" src="hoaout.jpg"onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body></html>
Xem Demo/Rollover
Truy cập đến phầntử bằng attribute
name
Vấn đề: Lần đầu tiền di chuột lên ảnh, sẽ mất một thời gianảnh mới được load mặc dù trang web đã được mở ra từ lâuNguyên nhân: Khi người dùng di chuột lên, ảnh mới đượcloadGiải pháp: Load trước ảnh
Kỹ thuật:Tạo đối tượng image cho mỗi ảnh muốn load trướcGán đường dẫn của ảnh cho thuộc tính src của đối tượng ảnhđó
Giải thích:Khi gặp lệnh imageObject.src=“link_cua_anh” thì ảnhđược load ngầm bên dưới, máy tính tiếp tục thực hiện các lệnhsau lệnh này Giải pháp này không làm cho việc load trang web chậm đi
Vấn đề nảy sinh khi thực hiện Rollover
Vấn đề: Lần đầu tiền di chuột lên ảnh, sẽ mất một thời gianảnh mới được load mặc dù trang web đã được mở ra từ lâuNguyên nhân: Khi người dùng di chuột lên, ảnh mới đượcloadGiải pháp: Load trước ảnh
Kỹ thuật:Tạo đối tượng image cho mỗi ảnh muốn load trướcGán đường dẫn của ảnh cho thuộc tính src của đối tượng ảnhđó
Giải thích:Khi gặp lệnh imageObject.src=“link_cua_anh” thì ảnhđược load ngầm bên dưới, máy tính tiếp tục thực hiện các lệnhsau lệnh này Giải pháp này không làm cho việc load trang web chậm đi
Tạo hiệu ứng và validate Form 8
Demo load trước ảnh<html><head><script type="text/javascript">
var hoaover = new Image();var hoaout = new Image();function loadAnh() {
hoaover.src = "hoaover.jpg";hoaout.src = "hoaout.jpg";
}function onMouseOverEvent() {
document.img_hoa.src = hoaover.src}function onMouseOutEvent() {
document.img_hoa.src = hoaout.src}
</script></head><body onload = "loadAnh();"><img name="img_hoa" src="hoaout.jpg"
onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body></html>
Tạo hiệu ứng và validate Form 9
<html><head><script type="text/javascript">
var hoaover = new Image();var hoaout = new Image();function loadAnh() {
hoaover.src = "hoaover.jpg";hoaout.src = "hoaout.jpg";
}function onMouseOverEvent() {
document.img_hoa.src = hoaover.src}function onMouseOutEvent() {
document.img_hoa.src = hoaout.src}
</script></head><body onload = "loadAnh();"><img name="img_hoa" src="hoaout.jpg"
onmouseover="onMouseOverEvent();" onmouseout="onMouseOutEvent();" /></body></html> Xem Rollover/preLoad
Slide Show là gìLà hiệu ứng ảnh được hiện ra thay thế cho ảnh trước đóCó thể có thanh điều khiển cho người dùng
Slide Show
Slide Show là gìLà hiệu ứng ảnh được hiện ra thay thế cho ảnh trước đóCó thể có thanh điều khiển cho người dùng
Tạo hiệu ứng và validate Form 10
Thanh điều khiển
Truy cập trang web http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders/ để tham khảo cácslide show làm bằng javascript
Các bước để làm Slide ShowLoad trước tất cả các ảnhXử lý sự kiện cho button NextXử lý sự kiện cho button Back
Các bước làm Slide Show
<body onload = "loadAnh();"><img id="hoa" src="anh0.jpg" /><input type="button" value="back" onclick="back();" /><input type="button" value = "next" onclick="next();"/>
</body>
Tạo hiệu ứng và validate Form 11
<body onload = "loadAnh();"><img id="hoa" src="anh0.jpg" /><input type="button" value="back" onclick="back();" /><input type="button" value = "next" onclick="next();"/>
</body>
Xem SlideShow
Demo làm Slide Showvar anhAr = [];
var currentIndex=0;function loadAnh() {
for (var i = 0; i < 6; i++) {anhAr[i] = new Image();anhAr[i].src = "anh"+i+".jpg";
}}function next() {
if (currentIndex < 4) {currentIndex++;document.getElementById("hoa").src = anhAr[currentIndex].src;
}}function back() {
if (currentIndex > 0) {currentIndex--;document.getElementById("hoa").src = anhAr[currentIndex].src;
}}
Tạo hiệu ứng và validate Form 12
var anhAr = [];var currentIndex=0;function loadAnh() {
for (var i = 0; i < 6; i++) {anhAr[i] = new Image();anhAr[i].src = "anh"+i+".jpg";
}}function next() {
if (currentIndex < 4) {currentIndex++;document.getElementById("hoa").src = anhAr[currentIndex].src;
}}function back() {
if (currentIndex > 0) {currentIndex--;document.getElementById("hoa").src = anhAr[currentIndex].src;
}}
Kết quả Demo
Ảnh được thayđổi sau khi nhấn
Next
Tạo hiệu ứng và validate Form 13
Bản đồ ảnh là ảnh có những vùng cụ thể được định nghĩa đểthực hiện một hành động nào đó khi người dùng tác động lên
Cho người dùng chọn khu vực (đất nước) mà người truy cập cư trúSử dụng như menu cho người dùng chọn mặt hàng cần mua
Bản đồ ảnh
Tạo hiệu ứng và validate Form 14Xem World Map
HTML cung cấp thẻ map để tạo bản đồ ảnhThẻ map đi liền sau thẻ img, thuộc tính usemap của thẻimg có giá trị bằng giá trị thuộc tính name của thẻ maptương ứngThẻ area trong thẻ map để chỉ ra các vùng trên bản đồ.Vùng trên bản đồ được chỉ ra bằng thuộc tính coords
Bản đồ ảnh
Tạo hiệu ứng và validate Form 15
Bản đồ ảnh
<img width="1000" src="bando.jpg" usemap="#bando" id="bando" /></p><map name="bando">
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chaumy.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauphi.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauau.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chaua.jpg';"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauuc.jpg';" /></map>
Thuộc tính usemap của ảnh có giá trịbằng giá trị của thuộc tính name của thẻ
map
Tạo hiệu ứng và validate Form 16
<img width="1000" src="bando.jpg" usemap="#bando" id="bando" /></p><map name="bando">
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chaumy.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauphi.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauau.jpg'"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chaua.jpg';"/>
<area shape="poly" coords="" href="#"onmouseover="document.getElementById('bando').src='bando.chauuc.jpg';" /></map>
CÁC ĐIỀU KHIỂN
Biến và toán tử 17
CÁC ĐIỀU KHIỂN
Javascript cung cấp các điều khiển để tương tác với ngườidùng
Select BoxCheckBoxRadio ButtonForm
Các điều khiển
Tạo hiệu ứng và validate Form 18
Một số element được định nghĩa thêm thuộc tính name (ví dụnhư các điều khiển checkbox, radio button…)Có thể sử dụng attribute name để truy cập đến một nhómcác element có cùng giá trị attribute namePhân biệt id và name
id là duy nhất, mỗi id đại diện cho 1 elementNhiều phần tử có cùng giá trị của attribute name, mỗi giá trịname đại diện cho một nhóm các phần tử
Sử dụng phương thức getElementsByName(name) để lấy vềmột mảng các element có cùng thuộc tính name
Attribute name
Một số element được định nghĩa thêm thuộc tính name (ví dụnhư các điều khiển checkbox, radio button…)Có thể sử dụng attribute name để truy cập đến một nhómcác element có cùng giá trị attribute namePhân biệt id và name
id là duy nhất, mỗi id đại diện cho 1 elementNhiều phần tử có cùng giá trị của attribute name, mỗi giá trịname đại diện cho một nhóm các phần tử
Sử dụng phương thức getElementsByName(name) để lấy vềmột mảng các element có cùng thuộc tính name
Tạo hiệu ứng và validate Form 19
Demo sử dụng attribute nameđể truy cập đến một nhóm các phần tử
<html><body ><input type="checkbox" name="test" value="how"/><input type="checkbox" name="test" value="are"/><input type="checkbox" name="test" value="you"/><input type="checkbox" name="test" value="?"/><script type="text/javascript">
var ckAr = document.getElementsByName("test");var str = "";for (var i = 0; i < ckAr.length; i++) {
str = str + " "+ ckAr[i].value}alert(str);
</script></body></html>
Tạo hiệu ứng và validate Form 20
<html><body ><input type="checkbox" name="test" value="how"/><input type="checkbox" name="test" value="are"/><input type="checkbox" name="test" value="you"/><input type="checkbox" name="test" value="?"/><script type="text/javascript">
var ckAr = document.getElementsByName("test");var str = "";for (var i = 0; i < ckAr.length; i++) {
str = str + " "+ ckAr[i].value}alert(str);
</script></body></html>
Select Box
Trên FireFox, truy cập đến giá trị được chọn của SelectBox bằng thuộc tính value
Trên FireFox cũng có thể thiết lập giá trị được chọn choSelect box bằng JavaScript
Select Box
<select id="country"><option selected="selected">Viet Nam</option><option value="Anh">Anh</option><option value="My">My</option>
</select>>
Select Box
Trên FireFox, truy cập đến giá trị được chọn của SelectBox bằng thuộc tính value
Trên FireFox cũng có thể thiết lập giá trị được chọn choSelect box bằng JavaScript
Tạo hiệu ứng và validate Form 21
document.getElementById("country").value
document.getElementById("country").value = "Mỹ"
Bài toánKhi nhấn vào button Chọn Quốc Gia sẽ hiển thị nước đượcchọn
Demo sử dụng Select Box
Tạo hiệu ứng và validate Form 22
Xem Dieu khien\SelectBox
Demo sử dụng Select Box
<html ><head><script type="text/javascript">
function chonQuocGiaClick(){var name = document.getElementById("country").value;alert(name);
}</script>
</head><body>
<select id="country"><option selected="selected">Viet Nam</option><option value="Anh">Anh</option><option value="My">My</option>
</select><input type ="button" value="Chọn Quốc Gia" onclick="chonQuocGiaClick()" />
</body></html>
Tạo hiệu ứng và validate Form 23
<html ><head><script type="text/javascript">
function chonQuocGiaClick(){var name = document.getElementById("country").value;alert(name);
}</script>
</head><body>
<select id="country"><option selected="selected">Viet Nam</option><option value="Anh">Anh</option><option value="My">My</option>
</select><input type ="button" value="Chọn Quốc Gia" onclick="chonQuocGiaClick()" />
</body></html>
Bài toán
Demo thiết lập giá trị cho Select Box
<body><p><input type="button" value="Chau A" onclick= "chauAClick();" /><input type="button" value="Chau Au" onclick="chauAuClick();"/><input type="button" value="Chau My" onclick="chauMy();" /> </p><p><select id="country">
<option selected="selected">Viet Nam</option><option value="Anh">Anh</option><option value="My">My</option>
</select></p></body>
Tạo hiệu ứng và validate Form 24
<body><p><input type="button" value="Chau A" onclick= "chauAClick();" /><input type="button" value="Chau Au" onclick="chauAuClick();"/><input type="button" value="Chau My" onclick="chauMy();" /> </p><p><select id="country">
<option selected="selected">Viet Nam</option><option value="Anh">Anh</option><option value="My">My</option>
</select></p></body>
Click vàoChau Au
Click vàoChau My
Xem Dieu khien\Select box
Demo thiết lập giá trị cho Select Box
<script type="text/javascript">function chauAClick() {
document.getElementById("country").value = "Viet Nam";}function chauAuClick() {
document.getElementById("country").value = "Anh";}function chauMy() {
document.getElementById("country").value = "My";}
</script>
Tạo hiệu ứng và validate Form 25
<script type="text/javascript">function chauAClick() {
document.getElementById("country").value = "Viet Nam";}function chauAuClick() {
document.getElementById("country").value = "Anh";}function chauMy() {
document.getElementById("country").value = "My";}
</script>
Dùng để người dùng lựa chọnCheckBox có hai trạng thái là được chọn và không đượcchọn
Trong JavaScript, sử dụng thuộc tính checked của CheckBoxđể xác định và thiết lập trạng thái cho CheckBox
Giá trị checked = true: CheckBox được chọnGiá trị checked = false: CheckBox không được chọn
CheckBox
<input type="checkbox" value ="Kem que"name="ckKem" checked="checked" />
Dùng để người dùng lựa chọnCheckBox có hai trạng thái là được chọn và không đượcchọn
Trong JavaScript, sử dụng thuộc tính checked của CheckBoxđể xác định và thiết lập trạng thái cho CheckBox
Giá trị checked = true: CheckBox được chọnGiá trị checked = false: CheckBox không được chọn
Tạo hiệu ứng và validate Form 26
BTVN:Tìm cách thiết lập và truy cập giá trị được chọn của CheckBoxtrên IEViết lại 2 ví dụ trên để có thể chạy trên cả IE và FireFox
CheckBox
Tạo hiệu ứng và validate Form 27
<html ><body>
Cac loai kem trong cua hang:<br /><input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br /><input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br /><input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br /><input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br /><input type="button" onclick="chonKem();" value="Chon kem" /><p id="pKemDaChon"></p>
</body></html>
Demo sử dụng CheckBox<html ><body>
Cac loai kem trong cua hang:<br /><input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br /><input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br /><input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br /><input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br /><input type="button" onclick="chonKem();" value="Chon kem" /><p id="pKemDaChon"></p>
</body></html>
Tạo hiệu ứng và validate Form 28
Ứng dụng liệt kênhững loại kem
được chọn
Xem Dieu khien\Checkbox
Demo sử dụng CheckBox<html ><head>
<script type="text/javascript">function chonKem() {
var str = "Nhung loai kem ban da chon la:<br/>";var kemAr = document.getElementsByName("ckKem");for (var i = 0; i < kemAr.length; i++) {
if (kemAr[i].checked) {str= str + kemAr[i].value +"<br/>"
}}document.getElementById("pKemDaChon").innerHTML = str;
}</script>
</head><body>Cac loai kem trong cua hang:<br /><input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br /><input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br /><input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br /><input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br /><input type="button" onclick="chonKem();" value="Chon kem" /><p id="pKemDaChon"></p></body></html>
Tạo hiệu ứng và validate Form 29
<html ><head><script type="text/javascript">
function chonKem() {var str = "Nhung loai kem ban da chon la:<br/>";var kemAr = document.getElementsByName("ckKem");for (var i = 0; i < kemAr.length; i++) {
if (kemAr[i].checked) {str= str + kemAr[i].value +"<br/>"
}}document.getElementById("pKemDaChon").innerHTML = str;
}</script>
</head><body>Cac loai kem trong cua hang:<br /><input type="checkbox" value="Kem que" name="ckKem"/>Kem que <br /><input type="checkbox" value="Kem dau" name="ckKem"/>Kem dau <br /><input type="checkbox" value="Kem bo" name="ckKem"/>Kem bo <br /><input type="checkbox" value="Kem vani" name="ckKem"/>Kem vani <br /><input type="button" onclick="chonKem();" value="Chon kem" /><p id="pKemDaChon"></p></body></html>
Dùng để người dùng lựa chọnCheckBox có hai trạng thái là được chọn và không đượcchọnThường được sử dụng theo nhóm, trong nhóm chỉ một Radiođược chọn
Các radio có cùng tên thuộc cùng một nhóm
Radio Button
<input type="radio" value="Lon" name="rdSize" checked=checked/>Lon<br /><input type="radio" value="Vua" name="rdSize" />Vua<br /><input type="radio" value="Nho" name="rdSize" />Nho<br />
Dùng để người dùng lựa chọnCheckBox có hai trạng thái là được chọn và không đượcchọnThường được sử dụng theo nhóm, trong nhóm chỉ một Radiođược chọn
Các radio có cùng tên thuộc cùng một nhóm
Tạo hiệu ứng và validate Form 30
<input type="radio" value="Lon" name="rdSize" checked=checked/>Lon<br /><input type="radio" value="Vua" name="rdSize" />Vua<br /><input type="radio" value="Nho" name="rdSize" />Nho<br />
Demo sử dụng Radio Button
Tạo hiệu ứng và validate Form 31
Hiển thị loại kemđược chọn
Xem Dieu khien\Radio Button
Demo sử dụng Radio Button
var size="";var sizeAr = document.getElementsByName("rdSize");for (var i = 0; i < sizeAr.length; i++) {
if (sizeAr[i].checked) {size = sizeAr[i].value;
}}
str = str + "Kich thuoc ban da chon la: " + size;
Tạo hiệu ứng và validate Form 32
var size="";var sizeAr = document.getElementsByName("rdSize");for (var i = 0; i < sizeAr.length; i++) {
if (sizeAr[i].checked) {size = sizeAr[i].value;
}}
str = str + "Kich thuoc ban da chon la: " + size;
FORM &KIỂM TRA HỢP LỆ CHO FORM
Biến và toán tử 33
FORM &KIỂM TRA HỢP LỆ CHO FORM
Dùng để gửi dữ liệu lên serverKhi người dùng nhấn vào Button Submit thì dữ liệu sẽ đượcđóng gói và gửi lên ServerForm sử dụng phương thức GET hoặc POST để gửi dữ liệulên Server
Form
First Name: PhạmLast Name: Thanh
…..
Tạo hiệu ứng và validate Form 34
First Name: PhạmLast Name: Thanh
…..
Kiểm tra tính hợp lệ làKiểm tra xem thông tin cần thiết đã được điền vào form chưa?VÀ Thông tin điền vào có đúng yêu cầu hay không?
Validate form rất cần thiết để đảm bảo tính đúng đắn của csdl
Kiểm tra tính hợp lệ của Form
Tạo hiệu ứng và validate Form 35
Thông báo lỗi
Trước đây việc kiểm tra hợp lệ được thực hiện trên server(server-side valiation)Javascript ra đời, thực hiện kiểm tra hợp lệ trên browser(client-side validation) trước khi gửi dữ liệu lên serverVới một số lượng lớn người truy cập, kiểm tra hợp lệ trênbrower sẽ giảm tải cho server
Chú ý: Vẫn phải kiểm tra hợp lệ trên server vì người dùng cóthể disable javascript
Kiểm tra tính hợp lệ của Form
Trước đây việc kiểm tra hợp lệ được thực hiện trên server(server-side valiation)Javascript ra đời, thực hiện kiểm tra hợp lệ trên browser(client-side validation) trước khi gửi dữ liệu lên serverVới một số lượng lớn người truy cập, kiểm tra hợp lệ trênbrower sẽ giảm tải cho server
Chú ý: Vẫn phải kiểm tra hợp lệ trên server vì người dùng cóthể disable javascript
Tạo hiệu ứng và validate Form 36
Mỗi Form có một hoặc nhiều button SubmitSự kiện onSubmit của form
Được kích hoạt khi người dùng nhấn vào button SubmitNếu onSubmit có giá trị trả về là True, dữ liệu được gửi lênServerNếu onSubmit có giá trị trả về là False, dữ liệu không đượcgửi lên Server
Sự kiện onSubmit của Form
Mỗi Form có một hoặc nhiều button SubmitSự kiện onSubmit của form
Được kích hoạt khi người dùng nhấn vào button SubmitNếu onSubmit có giá trị trả về là True, dữ liệu được gửi lênServerNếu onSubmit có giá trị trả về là False, dữ liệu không đượcgửi lên Server
Tạo hiệu ứng và validate Form 37
Viết hàm thực hiện việc validateNếu thông tin không hợp lệ, trả về giá trị FalseNếu thông tin hợp lệ, trả về True
Hàm này sẽ được dùng xử lý sự kiện cho onSubmit cho Form
Thực hiện kiểm tra hợp lệ
Viết hàm thực hiện việc validateNếu thông tin không hợp lệ, trả về giá trị FalseNếu thông tin hợp lệ, trả về True
Hàm này sẽ được dùng xử lý sự kiện cho onSubmit cho Form
Tạo hiệu ứng và validate Form 38
Khi nhấn vào button Submit, form sẽ được validateNếu tên chưa được nhập, sẽ hiển thị thông báo lỗiNếu tên được nhập, hiển thị lời chào
Demo validate form
<html><body><form action="#" onsubmit="return validateForm()" >
<p>Name: <input type = "text" name="txtName" /></p><p><input type="submit" value="Submit“ /></p>
</form></body></html>
Tạo hiệu ứng và validate Form 39
<html><body><form action="#" onsubmit="return validateForm()" >
<p>Name: <input type = "text" name="txtName" /></p><p><input type="submit" value="Submit“ /></p>
</form></body></html>
Xem Dieu khien\Form
Demo kiểm tra hợp lệ cho Form<html><head><script type="text/javascript">
function validateForm() {var name = document.forms[0].txtName.value;if (name == "") {
alert("Hay nhap ten vao!");return false;
}else {
alert("Hi " + name +" !" );return true;
}}
</script></head><body>
<form action="#" onsubmit="return validateForm()" ><p>Name: <input type = "text" name="txtName" /></p><p><input type="submit" value="Submit“ /></p></form></body></html>
Trả về False nếu dữliệu không hợp lệ
Tạo hiệu ứng và validate Form 40
<html><head><script type="text/javascript">
function validateForm() {var name = document.forms[0].txtName.value;if (name == "") {
alert("Hay nhap ten vao!");return false;
}else {
alert("Hi " + name +" !" );return true;
}}
</script></head><body>
<form action="#" onsubmit="return validateForm()" ><p>Name: <input type = "text" name="txtName" /></p><p><input type="submit" value="Submit“ /></p></form></body></html>
Xử lý sự kiệnonSubmit cho Form
Trả về True nếu dữliệu hợp lệ
Có thể truy cập đến Form bằng các cách sauChỉ số của Form: Document.Forms[0]Tên Form: Document.Forms[“TenForm”]Chỉ số ID của Form: Document.Forms[“id”]
Các cách khác để truy cập Form
Tạo hiệu ứng và validate Form 41
Có thể dùng JavaScript để tạo các hiệu ứng như Rollover,Slide ShowKhi tạo hiệu ứng Rollover, khi di chuột lên ảnh, ảnh mớiđược load. Cho nên, nên load trước ảnhJavaScript cung cấp các phương thức và thuộc tính để thaotác với các điều khiển như SelectBox, CheckBox, RadioButton và FormRadio Button thường được sử dụng theo nhóm. Mỗi nhóm chỉcó một Radio được chọn. Những Radio nào cùng attributename được xem là cùng một nhómMỗi Form có một button có type submit. Khi button nàyđược nhấn, sẽ kích hoạt sự kiện onSubmit của FormNếu xử lý sự kiện onSubmit trả về True, dữ liệu được gửiđi. Nếu trả về False, dữ liệu không được gửi đi
Tổng kết bài học
Có thể dùng JavaScript để tạo các hiệu ứng như Rollover,Slide ShowKhi tạo hiệu ứng Rollover, khi di chuột lên ảnh, ảnh mớiđược load. Cho nên, nên load trước ảnhJavaScript cung cấp các phương thức và thuộc tính để thaotác với các điều khiển như SelectBox, CheckBox, RadioButton và FormRadio Button thường được sử dụng theo nhóm. Mỗi nhóm chỉcó một Radio được chọn. Những Radio nào cùng attributename được xem là cùng một nhómMỗi Form có một button có type submit. Khi button nàyđược nhấn, sẽ kích hoạt sự kiện onSubmit của FormNếu xử lý sự kiện onSubmit trả về True, dữ liệu được gửiđi. Nếu trả về False, dữ liệu không được gửi đi
Tạo hiệu ứng và validate Form 42