Hướng dẫn validate form bootstrap 4 - xác thực biểu mẫu bootstrap 4
Đã đăng vào thg 6 22, 2018 9:58 SA 2 phút đọc 2 phút đọc LayoutHTMLDesign bao gồm form bootstrap và 3 input với nút submit. Trong ví dụ này sử dụng 3 loại input khác nhau - một kiểu nhập văn bản, một kiểu mật khẩu và một kiểu email.
CSSThêm 1 chút css cơ bản vào để form dễ nhìn hơn 1 chút:
Validation TypesHTML5 cung cấp một cách dễ dàng để "inline validation", sử dụng các thuộc tính input. Có một số lượng lớn các thuộc tính có sẵn, nhưng hiện tại hãy xem xét một số thuộc tính phổ biến nhất. Để biết danh sách đầy đủ, bạn có thể tham khảo link hướng dẫn MDN guide."inline validation", sử dụng các thuộc tính input. Có một số lượng lớn các thuộc tính có sẵn, nhưng hiện tại hãy xem xét một số thuộc tính phổ biến nhất. Để biết danh sách đầy đủ, bạn có thể tham khảo link hướng dẫn MDN guide. required Thuộc tính này quy định trường đầu vào không được để trống. Nó yêu cầu người dùng nhập nội dung nào đó trước khi gửi form. Thuộc tính này quy định trường đầu vào không được để trống. Nó yêu cầu người dùng nhập nội dung nào đó trước khi gửi form.
maxlength and minlength Chỉ định số lượng ký hiệu maximum/minimum (tối đa / tối thiểu) mà người dùng có thể nhập vào input. Điều này đặc biệt hữu ích trong các trường mật khẩu mà mật khẩu dài hơn có nghĩa là mật khẩu an toàn hơn. Chỉ định số lượng ký hiệu maximum/minimum (tối đa / tối thiểu) mà người dùng có thể nhập vào input. Điều này đặc biệt hữu ích trong các trường mật khẩu mà mật khẩu dài hơn có nghĩa là mật khẩu an toàn hơn.
pattern Chỉ định cụm từ phải khớp với thứ tự dữ liệu đã nhập. Nó có thể được sử dụng với các loại input sau: "text, search, url, email, and password". Chỉ định cụm từ phải khớp với thứ tự dữ liệu đã nhập. Nó có thể được sử dụng với các loại input sau: "text, search, url, email, and password".
Form Validation trong Bootstrap StudioBootstrap Studio cung cấp một cách nhanh chóng và dễ dàng để validate form của bạn mà không cần phải viết một dòng code. Ứng dụng này có các điều khiển tích hợp cho phép bạn nhanh chóng thiết lập tất cả các quy tắc xác thực mà bạn có thể cần. để hiểu hơn bạn xem tham khảo tại đây. Kết luậnTham khảo demo tại đây: All rights reserved |