Bắt Lỗi Form Đăng Ký Bằng Javascript Cơ Bản, Bắt Lỗi Form Đăng Ký Bằng Javascript

Khi bạn ghé thăm một trang web nào đó, bạn có thể thường xuyên bắt gặp các form (biểu mẫu) ví dụ như các form đăng ký, đăng nhập tài khoản, các form lấy ý kiến khách hàng, … Các thông tin mà người dùng nhập vào form cần phải được xác thực (validate) để đảm bảo sự hợp lý của dữ liệu.Một vài ví dụ về validate form chúng ta có thể thường gặp bao gồm:Kiểm tra đảm bảo dữ liệu không được để trống.Kiểm tra định dạng email, số điện thoạiYêu cầu khi đặt mật khẩu (độ dài, các ký tự phải có, …)Zip code, quốc gia, ngày tháng, ……Vậy trên thực tế người ta sử dụng validate form khi nào?Dữ liệu của form sẽ được gửi tới server, và việc validate sẽ được thực hiện tại phía máy chủ.Dữ liệu của form sẽ được xác thực tại client trước khi gửi tới server bằng cách sử dụng Javascript, điều này giúp server không phải làm việc quá nhiều, và tăng hiệu năng cho ứng dụng.Sử dụng kết hợp cả 2 phương thức trên để validate.OK, bây giờ chúng ta cùng đi vào một ví dụ cụ thểỞ trên mình có giao diện một form đăng ký cơ bản với các trường dữ liệu : Họ tên, Số điện thoại, Email và một nút Đăng kýGiao diện phần này các bạn có thể tham khảo tại đây : https://github.com/buihien0109/js-validate-basicĐối với form bên trên, chúng ta có thể liệt kê ra một số trường hợp cần validate như:Họ tên không được để trốngSố điện thoại không được để trốngEmail không được để trốngSố điện thoại không đúng định dạngEmail không đúng định dạngNếu có trường hợp nào trong các trường hợp trên xảy ra, chúng ta sẽ thông báo 1 message text ngay bên dưới ô input để người dùng dễ nhận biết và chỉnh sửa lại nội dung cho phù hợpCòn trường hợp tất cả các ô dữ liệu đều thỏa mãn điều kiện validate, lúc này chúng ta sẽ thông báo ra message với nội dung “Đăng ký thành công”Bắt đầu thôi nào