Top 2 cách ràng buộc dữ liệu trong HTML5 mà lập trình viên nào cũng phải biết

Top 2 cách ràng buộc dữ liệu trong HTML5 mà lập trình viên nào cũng phải biết

Bảo Phong -Developer Follow Author

Trước khi HTML5 ra đời, nếu chúng ta dùng HTML làm 1 form thì phải viết Javascript để ràng buộc dữ liệu. Nhưng bây giờ, chỉ cần các Attribute đơn giản trong HTML5 thì chúng ta đã có các thẻ input validate đa dạng yêu cầu.

HTML5 giúp code sạch hơn – đẹp hơn – ít code hơn.

Top 1: Một vài validate  phổ biến nhất trong HTML5

Khi dùng kiểu input <input type=”email” />: bắt buộc là giá trị email <input type="url" />: bắt buộc là giá trị url

Dùng attribute khác

AttributeKiểu input hỗ trợGiải thích
patterntext, search, url, tel, email, passwordphải khớp với giá trị regular expression
minrange, number, date, month, week, datetime, datetime-local, timegiá trị phải lớn hơn hoặc bằng giá trị min
maxrange, number, date, month, week, datetime, datetime-local, timegiá trị phải nhỏ hơn hoặc bằng giá trị max
requiredtext, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textareabắt buộc phải có giá trị
minlengthtext, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa lớn hơn hoặc bằng minlength
maxlengthtext, search, url, tel, email, password, textareasố ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng maxlength

Ví dụ

Quá trình validate dữ liệu

Quá trình này sẽ thông qua bộ Validation API, nó có thể là trên cả form hoặc trên từng element trong form. Được thực hiện bằng một trong các cách sau bằng cách gọi checkValidity() của các element input, select, button, textarea. Nó sẽ chỉ validate dữ liệu trên element đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta dùng selector của CSS là :valid và :invalid để format gọi checkValidity() hoặc reportValidity() trên thằng form Khi form được submit bằng click ‘hoặc ‘<button type=’submit’ /> hoặc ấn enter

Lưu ý

  • Nếu set novalidate trên thẻ <form novalidate />, là chúng ta bỏ qua hết việc validate
  • Khi gọi submit() trên form, không trigger validation, phương thức này sẽ gửi hết dữ liệu của form lên server dù nó có hay không thỏa điều kiện. Nên gọi sự kiện click() của nút submit

Can thiệp vào quá trình validate bằng bộ Validation API

Ý tưởng chính là bắt một sự kiện nào đó trên element như onchange, rồi trigger một đoạn javascript để validate, sau đó dùng phương thức field.setCustomValidity() để set kết quả validate: nếu là String rỗng nghĩa là ok, còn ngược lại là error, đoạn string này sẽ đem đi hiển thị như thông báo error cho user.

Xem Thêm : HTML5 là gì?

Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi World Wide Web Consortium (W3C). HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML và bổ sung thêm các đặc tả nổi trội của XHTML, bổ sung thêm các tag rất hay có thể sử dụng Canvas với kiểu bitmap hoặc SVG với kiểu vector, DOM cấp 2, đặc biệt là JavaScript.

Top 2: Giới hạn file size khi upload

Dùng javascript để đọc file được chọn, FIle.size(), so sánh kích thước này rồi trả về kết quả cho trình duyệt

Hook cái phương thức này vào trong sự kiện mong muốn

CSS Hiển thị validation

Dùng :required và :optional để trỏ đến các element nào có thuộc tính required hoặc không

:valid và :invalid trên các element bị/không bị lỗi

Để thay đổi nội dung câu thông báo, sử dụng element.setCustomValidity('thông báo') trên các element: <fieldset><input><output><select><button><textarea>

Lời kết:

Trên đây Share Code Website đã giới thiệu cho các bạn Top 2 cách ràng buộc dữ liệu trong HTML5 mà lập trình viên nào cũng phải biết và quy trình để ràng buộc dữ liệu trong HTML5 của 1 form input căn bản nhất.

Comment

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Kết quả xổ số hôm nay Trực Tiếp: KQXS, XSKT,  Số Trúng 3 miền, Xổ Số điện toán, xổ số Vietlove, KQXS 3 Miền mượt số #1. Tường thuật trực tiếp kết quả xổ số kiến thiết ngày hôm nay chuẩn nhất - nhanh nhất tại xskt.net.vn!

banner xskt

Dark Mode

Fanpage Facebook