Hướng dẫn dùng validate JavaScript
Chắc có lẽ không ít lần bạn gặp một website mà ở đó người dùng nhập các thông tin vào một biểu mẫu (form) trước khi gửi tới máy chủ. Chẳng hạn như việc các bạn đăng ký/đăng nhập tài khoản trên Codelearn. Các thông tin mà người dùng nhập vào biểu mẫu cần phải được xác thực (validate) để đảm bảo sự hợp lý của dữ liệu. Form Validation là gì?Form Validation thường được sử dụng tại máy chủ, sau khi máy khách đã nhập tất cả dữ liệu cần thiết và sau đó nhấn nút Gửi. Nếu dữ liệu được nhập bởi máy khách không chính xác hoặc không đầy đủ, máy chủ sẽ phải gửi lại tất cả dữ liệu cho máy khách và yêu cầu gửi lại biểu mẫu với thông tin chính xác. Đây thực sự là một quá trình kéo dài từng gây ra rất nhiều gánh nặng cho máy chủ. Javascript cung cấp một cách để validate form trên máy khách trước khi gửi nó đến máy chủ. Form Validation thường thực hiện hai chức năng:
Các cách Validate FormVề cơ bản, có 3 cách để Validate Form:
Trong bài viết này, mình sẽ trình bày về việc sử dụng Javascript để Validate Form. Để xây dựng được chức năng này thì đòi hỏi bạn phải có kiến thức Javascript căn bản, vì vậy nếu bạn chưa biết về Javascript thì hãy học nó đi nhé. Ví dụ cụ thểMình sẽ lấy một ví dụ để hiểu quá trình xác nhận. Đây là một biểu mẫu đơn giản ở định dạng html:
Output: Basic Form ValidationTrước tiên, chúng ta hãy xem cách thực hiện xác thực biểu mẫu cơ bản. Trong biểu mẫu trên, mình đang gọi
Data Format ValidationBây giờ chúng ta sẽ xem cách chúng ta có thể xác thực dữ liệu biểu mẫu đã nhập của mình trước khi gửi nó đến máy chủ web. Ví dụ sau đây cho thấy cách xác thực địa chỉ email đã nhập. Địa chỉ email phải chứa ít nhất dấu ‘@’ và dấu chấm (.). Ngoài ra, ‘@’ không được là ký tự đầu tiên của địa chỉ email và dấu chấm cuối cùng ít nhất phải là một ký tự sau dấu ‘@’.
Validate tự độngTrình duyệt có thể tự động thực hiện xác thực HTML Form. Hãy xem ví dụ sau đây:
Nếu trường biểu mẫu (fname) trống, thuộc tính
Chú ý: Các trình duyệt quá cũ, chẳng hạn IE phiên bản 9 hoặc cũ hơn không hỗ trợ validate tự động. HTML5 đã giới thiệu một khái niệm xác thực HTML mới được gọi là xác thực ràng buộc(constraint validation). Xác thực ràng buộc HTML dựa trên:
1. Ràng buộc xác thực HTML Input AttributesMột vài loại phần tử
Các bạn có thể xem danh sách đầy đủ ở đây. 2. Ràng buộc xác thực CSS Pseudo Selectors
Các bạn có thể xem danh sách đầy đủ ở đây. Tạm kếtNhư vậy trong bài viết này, chúng ta đã cùng tìm hiểu về cách Validate Form cơ bản với Javascript. Nếu các bạn thấy bài viết hữu ích hãy rate 5* và share cho mọi người tham khảo! Hãy để lại comment để mình có thể hoàn thiện bản thân hơn trong tương lai. Cám ơn các bạn! |