Form Validation trong JavaScript

Form Validation thường được sử dụng trên Server, sau khi Client đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Submit. Nếu dữ liệu nhập bởi một Client là không chính xác hoặc bị lỗi, Server sẽ phải gửi tất cả dữ liệu trở lại Client và yêu cầu rằng Form đó phải được đệ trình lại với thông tin chính xác. Đây thực sự là một tiến trình kéo dài mà đặt nhiều gánh nặng lên trên Server.

JavaScript cung cấp một cách để thẩm định dữ liệu của Form trên máy tính của Client trước khi gửi nó tới Web Server. Form Validation nói chung thực hiện hai chức năng:

Thẩm định cơ bản (Basic Form Validation) − Đầu tiên, Form phải được kiểm tra để đảm bảo rằng tất cả các trường bắt buộc được nhập đầy đủ. Nó sẽ yêu cầu chỉ một vòng lặp qua mỗi trường trong Form và kiểm tra dữ liệu.
Thẩm định định dạng dữ liệu (Data Format Validation) − Thứ hai, dữ liệu đã nhập phải được kiểm tra tính chính xác của Form và giá trị. Code của bạn phải có tính logic thích hợp để kiểm tra sự chính xác của dữ liệu.

Ví dụ

Chúng ta sẽ quan sát ví dụ sau để hiểu tiến trình của thẩm định. Dưới đây là một Form đơn giản trong định dạng HTML.


   
   
      Form Validation
      
      
      
   
   
   
      
         
            
            
               Name
               
            
            
            
               EMail
               
            
            
            
               Zip Code
               
            
            
            
               Country

Kết quả

Basic Form Validation

Đầu tiên chúng ta xem cách thực hiện một Basic Validation. Trong Form trên, chúng ta đang gọi validate() để thẩm định dữ liệu khi sự kiện onsubmit đang diễn ra. Code sau chỉ sự thực thi của hàm validate().

Data Format Validation

Bây giờ chúng ta sẽ thấy cách thẩm định dữ liệu Form đã nhập trước khi đệ trình nó tới Web Server.

Ví dụ sau chỉ cách thẩm định một địa chỉ Email đã nhập. Một địa chỉ Email phải chứa ít nhất một ký hiệu '@' và một dấu chấm (.). Ngoài ra, '@' không phải là ký tự đầu tiên của địa chỉ Email, và dấu chấm cuối cùng phải ít nhất là một ký tự sau ký hiệu '@'.

Ví dụ

Bạn thử code sau cho thẩm định Email:

Các bài học JavaScript khác tại VietJack:

Trang trước

Trang sau