Yêu cầu:
Giao diện
Tạo giao diện như sau:Hướng dẫn
Học JQuery | NenTang.vnNền tảng Kiến thức | //nentang.vn
Các thành phần nhập liệu [controls/fields] đơn giản [text, textarea, select]
Họ tên | |
Địa chỉ | |
Ngày/tháng/năm sinh | Ngày sinh Tháng sinh Năm sinh |
Sở thích cá nhân |
Các thành phần nhập liệu [controls/fields] [radio/checkbox]
Giới tính |
Nam
Nữ |
Đăng ký môn học |
Khóa học Web căn bản HTML,
CSS, JS
Khóa học Web nâng cao MySQL, PHP Khóa học Tư duy Giải thuật |
Link minh họa
//frontend-basic.learning.nentang.vn/course-jquery/thu-thap-du-lieu-nguoi-dung-nhap-trong-form-bang-jquery/index.htmlLàm form bằng HTML và chỉnh sửa lại giao diện cho đẹp với CSS không khó, bạn chỉ cần nhớ mấy cái input type là OK.
Vấn đề nằm ở Validate, tức là chuẩn hóa dữ liệu nhập vào và một số yêu cầu khác nữa. HTML5 làm form cũng rất tốt, nhưng có hạn chế là chưa được hỗ trợ rộng rãi và thống nhất giữa các trình duyệt, do vậy chúng ta vẫn phải cậy nhờ khá nhiều vào Javascript.
Về sau bạn sẽ biết ngoài việc bắt lỗi dữ liệu tại máy khách thì chúng ta còn phải kiểm tra dữ liệu một lần nữa tại Server cho chắc ăn bằng một ngôn ngữ lập trình web kiểu như PHP hoặc ASP.Net…
Nhưng đấy là về sau! Hiện tại chúng ta chỉ quan tâm tới Javascript thôi nhé.
Có vẻ chém gió hơi nhiều, giờ sẽ vào đề ngay. Chẳng hạn tôi có Form phải bắt lỗi trong các trường hợp sau:
- Người dùng không nhập dữ liệu;
- Người dùng không nhập đúng chuẩn email dạng aaa@bbb.ccc;
- Người dùng nhập chữ vào Số điện thoại hoặc nhập hơn 11 số;
- Người dùng nhập chữ vào Số lượng mua, hoặc con số nhỏ hơn hoặc bằng 0, hoặc lớn hơn hoặc bằng 100;
- Ngày nhận hàng không hợp chuẩn;
- Người dùng không chọn bất cứ hình thức thanh toán nào;
Thực tế là tôi đã viết code Javascript cho Form trên rồi, giờ bạn nhấn nút Đăng Ký Mua là biết liền, và thử xem nó có bắt lỗi đúng như yêu cầu không. Code mẫu:
// JavaScript Document
function validateForm[] {
//Họ phải được điền
var ho = document.forms["myForm"]["ho"].value;
if [ho == ""] {
alert["Họ không được để trống"];
return false;
}
//Tên phải được điền
var ten = document.forms["myForm"]["ten"].value;
if [ten == ""] {
alert["Tên không được để trống"];
return false;
}
//Email phải được điền chính xác
var email=document.forms["myForm"]["email"].value;
var aCong=email.indexOf["@"];
var dauCham = email.lastIndexOf["."];
if [email == ""] {
alert["Email không được để trống"];
return false;
}
else if [[aCong