Ngày biểu mẫu trong html
Tất cả các bài viết. BootstrapBước 1. Tạo cấu trúc HTML cho menu chọn ngày Chọn ngày: Bước 2. Định dạng CSS Bước 3. Call library Bootstrap Bước 4. Call library JQUERY Bước 5. Use JQUERY get day Bước 6. Gọi thư viện Datepicker
Bootstrap Xem (29508) Học thiết kế web Hầu hết các thư viện đều xác thực Javascript đều rất lớn và thường xuyên yêu cầu các thư viện đi kèm như jQuery. Nhưng sự thật chúng ta không thể sử dụng hết những thứ được đi kèm trong các thư viện đó. Việc đó gây ra việc bạn cần sử dụng 1 file thư viện quá nặng trong project nhưng lại không dùng hết, điều đó gây lãng phí tài nguyên. Vì vậy nên trong bài viết này, mình sẽ chỉ cho các bạn cách xác thực một biểu mẫu trên Front-end một cách ngắn gọn và nhẹ nhàng nhất, có thể bạn sẽ không cần sử dụng đến những thư viện sẵn có nữa.
Thông qua sự kết hợp giữa các loại đầu vào, cụ thể có thể là các thẻ tag, ví dụ Và các thuộc tính xác thực, giả sử có giới hạn như yêu cầu và mẫu, các trình duyệt có thể xác thực hợp lệ các đầu vào biểu mẫu và cảnh báo cho người dùng khi họ làm sai. Việc hỗ trợ các loại đầu vào và thuộc tính sẽ khác nhau theo từng loại trình duyệt, vậy đâu là cách giải quyết và mẹo để tối đa hóa khả năng tương thích với trình duyệt với mã của bạn? Xác thực văn bảnGiả sử bạn có một trường văn bản muốn người dùng phải nhập nó trước khi có thể gửi biểu mẫu đi. Thì chỉ cần thêm thuộc tính bắt buộc vào đầu vào của thẻ tag và trình duyệt sẽ hỗ trợ cảnh báo người dùng bắt họ phải điền thứ gì đó vào =)) HTML Và đây sẽ là kết quả của trình duyệt Chrome  Nếu bạn muốn thêm số lượng ký tự tối thiểu và tối đa, hãy sử dụng minlength và maxlength. Ví dụ dưới đây yêu cầu người dùng phải nhập một đoạn văn bản nằm trong khoảng từ 3 đến 12 ký tự Tiếp theo thuộc tính mẫu. Thuộc tính này cho phép bạn kiểm tra Regex với giá trị đầu vào. Ví dụ nếu bạn yêu cầu mật khẩu chứa ít nhất 1 ký tự viết hoa, 1 ký tự viết thường và 1 chữ số, trình duyệt có thể xác thực điều đó cho bạn Hình trên có cái thông báo cho người dùng phù hợp với định dạng được yêu cầu. Nếu bạn muốn đổi cái thông báo đó thành một nội dung khác thì sao nhỉ? 0 Xác thực số lượngĐối với thẻ đầu vào số, nó chỉ cho phép bạn nhập các số. Các trình duyệt sẽ từ chối chấp nhận các chữ cái và các ký tự khác hoặc cảnh báo người dùng nếu họ sử dụng chúng. Nhưng hãy cẩn thận, vì đối với type="number", bạn vẫn có thể nhập ký tự trên hệ điều hành Ubuntu, còn trên Window thì hình như là chữ d. Do đó, hãy bổ sung cho nó một mẫu thuộc tính để đảm bảo chỉ được nhập số 1 Theo default. number only allow them to input integer. Nhưng chúng ta có thể thay đổi điều đó, bạn có thể nhập số kiểu float với thuộc tính bước Bạn cũng nên sửa đổi mẫu của bạn để cho phép các số thập phân 2 Nếu các số phải nằm giữa một tập hợp các giá trị, trình duyệt có thể xác thực các số dựa trên hai thuộc tính tối thiểu và tối đa 3 Xác thực Email và URLCách tốt nhất để xác thực email và URL được cung cấp cho trình duyệt Regex. Regex mẫu dùng để xác thực email là một vấn đề khá nổi. Vậy thì đâu mới là mẫu Regex để xác thực email chính xác nhất để phù hợp với thông số kỹ thuật RFC822? Bạn có tin dưới đây là cách tốt nhất? 4 Regex on allow you don't input extension section after @. Nhưng bạn vẫn muốn yêu cầu người dùng nhập, hãy sử dụng Regex sau 5 Cũng giống như email, URL cũng sẽ xác thực tương tự Xác thực ngày tháng Cái xác thực của tháng này không phải ai cũng biết. Hầu hết mọi người sẽ sử dụng thư viện. Nhưng. có một vài loại đầu vào thực sự tuyệt vời không chỉ xác nhận ngày mà còn cung cấp các bộ chọn ngày gốc. Thật không thể, Chrome, Edge và Mobile Safari là trình duyệt duy nhất thực hiện nó. Firefox không áp dụng tính năng này Như trên, chúng ta có thể cung cấp một mẫu cho trình duyệt Trong các trình duyệt hỗ trợ, ngày đã chọn được hiển thị như sau. MM/DD/YYYY. Nhưng giá trị thực tế là trong định dạng này. YYYY-MM-DD Bạn nên cung cấp hướng dẫn cho người dùng trình duyệt không được hỗ trợ về định dạng này. Một cái gì đó như "Vui lòng sử dụng định dạng YYYY-MM-DD. " Nhưng chúng ta hoàn toàn có thể kiểm tra xem trình duyệt có hỗ trợ hay không để hiển thị cái thông báo trên Ok, vậy là bài viết của mình đến đây là hết. Lần sau mình sẽ hướng dẫn các bạn Xác thực cách sử dụng Xác thực API trong Javascript. Hãy đón đọc nhé. hack vui vẻ |
