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 | https://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

http://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 [email protected];
• 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:

Họ:



Tên:



Email:



Số Điện Thoại:



Số Lượng Mua:



Ngày Nhận Hàng:



Thanh Toán:
 Chuyển Khoản
 Trực Tiếp Khi Giao Hàng

Bây giờ tôi sẽ giải thích code.

---

Mục lục

• Thẻ mở Form
• Thẻ input
• Lấy dữ liệu từ input
• Không được bỏ trống dữ liệu:
• Kiểm tra Email hợp chuẩn

Thẻ mở Form

2 cái action=”#” và method=”post” được dùng cho việc gửi dữ liệu lên máy chủ server nên hiện bạn không cần phải quan tâm, chúng ta chỉ cần để ý đến tên của Form ở thuộc tính name=”myForm” và nơi xử lý dữ liệu qua 

0 chính là tên hàm mà trong đó ta xây dựng code Javascript để bắt lỗi. Ta để onsubmit có nghĩa là, khi người dùng nhấn nút submit thì dữ liệu được chuyển đến hàm

1

---

Thẻ input

Một thẻ input mẫu trong bài trên có dạng như này: 

Tôi sử dụng type là text, 6 trường đầu tiên tôi sử dụng type này, trường Thanh toán là type radio, nút Đăng Ký Mua là type submit, nút Xóa là type reset.Điều quan trọng trong thẻ input chính là name của nó. Chính thông qua name của Form và của Input mà Javascript lấy được dữ liệu nhập vào.

---

Lấy dữ liệu từ input

Đoạn code mẫu để lấy dữ liệu từ thẻ input: 

var ten = document.forms["myForm"]["ten"].value;

Như đoạn code trên có nghĩa là bạn lấy giá trị của thẻ input có tên là “ten” trong Form có tên là “myForm” và gán giá trị lấy được này vào biến var ten

Tương tự cho email: 

var email=document.forms["myForm"]["email"].value;

---

Không được bỏ trống dữ liệu:

var ten = document.forms["myForm"]["ten"].value;
if (ten == "") {
alert("Tên không được để trống");
return false;
}

Theo đó, sau khi lấy được dữ liệu từ thẻ input và gán vào biên ten, chương trình dùng hàm if để kiểm tra ten có rỗng hay không –

2. Nếu thỏa mãn điều kiện rỗng sẽ có hộp thông báo “Tên không được để trống” và ta dùng hàm alert để điều khiển tác vụ này, cuối cùng return false.

Kiểm tra dữ liệu nhập vào có phải là số không

var dienThoai = document.forms["myForm"]["dienThoai"].value;
var kiemTraDT = isNaN(dienThoai);
if (kiemTraDT == true) {
alert("Điện thoại phải để ở định dạng số");
return false;
}

Hàm dùng để kiểm tra số đó là

3 – viết tắt của is Not a Number. Nếu isNaN trả về giá trị

4 nghĩa là đó không phải là một số.

---

Kiểm tra Email hợp chuẩn

Có lẽ với đa số mọi người thì đây là code phức tạp nhất (với tôi cũng thế). Địa chỉ email chính xác phải thỏa mãn điều kiện sau:

• Phải có ký tự @;
• Trước @ phải có ít nhất 1 ký tự;
• Phải có ít nhất 1 dấu chấm trong email;
• Phải có ít nhất 1 ký tự đứng giữa @ và dấu chấm;
• Dấu chấm không được đứng ở vị trí cuối cùng;

Code mẫu:

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<1) || (dauChamemail.length)) {
alert("Email bạn điền không chính xác");
return false;
}

Chúng ta cần chú ý đến lệnh

5, nó sẽ xác định số ký tự đứng trước nó tính từ trái sang. Ví dụ, email [email protected] có giá trị

6 là 2 vì có 2 ký tự là a và b đứng trước 

7 có giá trị là 5 vì có 5 ký tự đứng trước dấu . là a, b, @, x, y;

Nếu không có ký tự cần tìm trong chuỗi, hàm

5 sẽ trả về -1.

Đến đây bạn tự hỏi

9 có ý nghĩa gì. Hết sức chú ý chữ last. Lệnh này cũng là xác định số ký tự đứng trước dấu chấm nhưng là dấu chấm cuối cùng.

Chẳng hạn email [email protected], thế thì dấu chấm cuối cùng là dấu chấm sau chữ gmail chứ không phải sau chữ xyz.

Giờ chúng ta cùng tìm hiểu ý nghĩa code:

var aCong=email.indexOf("@");if (aCong<1)

Chỉ có 2 trường hợp xảy ra khi aCong<1:

• Không có @ trong địa chỉ email, lúc này 
  0
• aCong = 0, nghĩa là không có ký tự nào đứng trước @, hay email nhập vào có dạng @klm.com – tức là không hợp chuẩn
• Vậy là với câu lệnh trên ta đã ép dữ liệu phải có @, và trước @ phải có ký tự

Sau @ phải có ít nhất 1 ký tự sau đó mới đến dấu chấm do đó, email hợp chuẩn thì số ký tự đứng trước dấu chấm luôn lớn hơn số ký tự đứng trước @ ít nhất 2 đơn vị – tức là

1, ngược lại điều này thì email đó không hợp lệ, nói cách khác là: 

2

Lệnh trên chúng ta đã ép phải tồn tại dấu chấm trong email, ngoài ra nó cũng buộc giữa dấu chấm cuối cùng và email phải có ít nhất 1 ký tự.