Dụng javascript lấy dữ liệu từ form

Yêu cầu:

Giao diện

Tạo giao diện như sau:

Hướng dẫn




  
  
  
  Học JQuery | NenTang.vn

  



  

  

Nề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.html

Là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

Chủ Đề