Yêu cầu:

Giao diện

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

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