Hướng dẫn javascript validate number input - javascript xác nhận đầu vào số
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:
Vậy trên thực tế người ta sử dụng validate form khi nào?
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ýHọ tên, Số điện thoại, Email và một nút Đăng ký
Đố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ư:
Nế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ợp Cò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""Đăng ký thành công" Bắt đầu thôi nào 😄 =))
Đầu tiên chúng ta sẽ truy cập vào nút " Đăng ký" và tiến hành lắng nghe sự kiện khi người dùng click vào nút nàyĐăng ký" và tiến hành lắng nghe sự kiện khi người dùng click vào nút này Bên trong hàm xử lý sự kiện, chúng ta tiến hành gọi function checkValidate(), function này sẽ trả về giá trị true/false tùy thuộc vào dữ liệu trong các ô input có thỏa mãn tất cả các điều kiện validate hay không?checkValidate(), function này sẽ trả về giá trị true/false tùy thuộc vào dữ liệu trong các ô input có thỏa mãn tất cả các điều kiện validate hay không? Trường hợp isValid == true, lúc này chúng ta sẽ hiển thị message "Gửi đăng ký thành công"isValid == true, lúc này chúng ta sẽ hiển thị message "Gửi đăng ký thành công" Bây giờ chúng ta sẽ tiến hành khai báo function checkValidate()checkValidate()
Trong function checkValidate(), trước hết chúng ta sẽ lấy ra dữ liệu của các ô input và lưu vào các biến usernameValue, emailValue, phoneValuecheckValidate(), trước hết chúng ta sẽ lấy ra dữ liệu của các ô input và lưu vào các biến usernameValue, emailValue, phoneValue Tiếp theo chúng ta có biến isCheck, biến này dùng để xác định xem dữ liệu ở tất cả các ô input có hợp lệ hay không, chỉ cần 1 trường hợp không hợp lệ isCheck = false (mặc định là true)isCheck, biến này dùng để xác định xem dữ liệu ở tất cả các ô input có hợp lệ hay không, chỉ cần 1 trường hợp không hợp lệ isCheck = false (mặc định là true) Trong function này chúng ta sẽ tiến hành kiểm tra dữ liệu của 3 ô input:
Ở trong mỗi trường lại có các điều kiện nhỏ hơn để chúng ta tiến hành kiểm tra. Vì cơ bản quá trình kiểm tra của 3 trường này khá giống nhau, vì vậy mình sẽ giải thích qua về quá trình validate của trường EmailEmail
Với trường email có 2 điều kiện validate :
Nế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ợpsetError() đồng thời truyền vào emailEle (để highlight) và message (thông báo lỗi trên giao diện), đồng thời giá trị isCheck = false Cò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"setSuccess() và truyền vào emailEle (để highlight)
Bắt đầu thôi nào 😄 =))setError() có tác dụng highlight ô input và hiển thị message error trong trường hợp validate error Đầu tiên chúng ta sẽ truy cập vào nút " Đăng ký" và tiến hành lắng nghe sự kiện khi người dùng click vào nút nàyBên trong hàm xử lý sự kiện, chúng ta tiến hành gọi function checkValidate(), function này sẽ trả về giá trị true/false tùy thuộc vào dữ liệu trong các ô input có thỏa mãn tất cả các điều kiện validate hay không?setError() có tác dụng highlight ô input trong trường hợp validate success Trường hợp isValid == true, lúc này chúng ta sẽ hiển thị message "Gửi đăng ký thành công""success" và "error" mình đều định nghĩa trong file style.css Bây giờ chúng ta sẽ tiến hành khai báo function checkValidate()setError()
Trong function checkValidate(), trước hết chúng ta sẽ lấy ra dữ liệu của các ô input và lưu vào các biến usernameValue, emailValue, phoneValueisEmail(), isPhone() có tác dụng kiểm tra xem đầu vào có phải là email hoặc số điện thoại hay không. Ở đây mình có sử dụng Regex để kiểm tra, phần Regex này các bạn có thể tìm kiếm trên mạng hoặc có thể tự viết 1 đoạn Regex Tiếp theo chúng ta có biến isCheck, biến này dùng để xác định xem dữ liệu ở tất cả các ô input có hợp lệ hay không, chỉ cần 1 trường hợp không hợp lệ isCheck = false (mặc định là true)"Đăng ký"
Trong function này chúng ta sẽ tiến hành kiểm tra dữ liệu của 3 ô input:success", " error" Kiểm tra trường username Kiểm tra trường phone Kiểm tra trường email
Ở trong mỗi trường lại có các điều kiện nhỏ hơn để chúng ta tiến hành kiểm tra. Vì cơ bản quá trình kiểm tra của 3 trường này khá giống nhau, vì vậy mình sẽ giải thích qua về quá trình validate của trường Email Với trường email có 2 điều kiện validate : |