Trước khi gửi dữ liệu đến máy chủ, điều quan trọng là phải đảm bảo tất cả các điều khiển biểu mẫu bắt buộc được điền vào đúng định dạng. Điều này được gọi là xác thực biểu mẫu phía máy khách và giúp đảm bảo dữ liệu được gửi khớp với các yêu cầu được đặt ra trong các điều khiển biểu mẫu khác nhau. Bài viết này hướng dẫn bạn các khái niệm cơ bản và ví dụ về xác thực biểu mẫu phía máy khách
điều kiện tiên quyết. Trình độ máy tính, hiểu biết hợp lý về HTML, CSS và JavaScript. Khách quan. Để hiểu xác thực biểu mẫu phía máy khách là gì, tại sao nó lại quan trọng và cách áp dụng các kỹ thuật khác nhau để triển khai nóXác thực phía máy khách là kiểm tra ban đầu và là một tính năng quan trọng của trải nghiệm người dùng tốt; . Nếu dữ liệu đến được máy chủ và sau đó bị từ chối, thì một sự chậm trễ đáng chú ý là do phải quay lại máy chủ rồi quay lại phía máy khách để yêu cầu người dùng sửa dữ liệu của họ
Tuy nhiên, xác thực phía máy khách không nên được coi là một biện pháp bảo mật toàn diện. Ứng dụng của bạn phải luôn thực hiện kiểm tra bảo mật đối với bất kỳ dữ liệu nào do biểu mẫu gửi ở phía máy chủ cũng như phía máy khách, vì việc xác thực phía máy khách quá dễ dàng để bỏ qua, vì vậy người dùng ác ý vẫn có thể dễ dàng gửi dữ liệu xấu đến máy chủ của bạn. Đọc Bảo mật trang web để biết điều gì có thể xảy ra;
Xác thực mẫu là gì?
Truy cập bất kỳ trang web phổ biến nào có biểu mẫu đăng ký và bạn sẽ nhận thấy rằng họ cung cấp phản hồi khi bạn không nhập dữ liệu của mình theo định dạng họ mong đợi. Bạn sẽ nhận được các tin nhắn như
- "Trường này là bắt buộc" [Bạn không thể để trống trường này]
- "Vui lòng nhập số điện thoại của bạn ở định dạng xxx-xxxx" [Định dạng dữ liệu cụ thể là bắt buộc để nó được coi là hợp lệ]
- "Vui lòng nhập địa chỉ email hợp lệ" [dữ liệu bạn nhập không đúng định dạng]
- "Mật khẩu của bạn cần dài từ 8 đến 30 ký tự và chứa một chữ cái viết hoa, một ký hiệu và một số. " [Cần có định dạng dữ liệu rất cụ thể cho dữ liệu của bạn]
Điều này được gọi là xác nhận mẫu. Khi bạn nhập dữ liệu, trình duyệt và/hoặc máy chủ web sẽ kiểm tra xem dữ liệu có đúng định dạng và trong giới hạn do ứng dụng đặt ra không. Xác thực được thực hiện trong trình duyệt được gọi là xác thực phía máy khách, trong khi xác thực được thực hiện trên máy chủ được gọi là xác thực phía máy chủ. Trong chương này, chúng tôi đang tập trung vào xác thực phía máy khách
Nếu thông tin được định dạng chính xác, ứng dụng sẽ cho phép dữ liệu được gửi đến máy chủ và [thường] được lưu trong cơ sở dữ liệu;
Chúng tôi muốn làm cho việc điền vào các biểu mẫu web dễ dàng nhất có thể. Vậy tại sao chúng tôi nhấn mạnh vào việc xác nhận các hình thức của chúng tôi?
- Chúng tôi muốn có được dữ liệu phù hợp, ở định dạng phù hợp. Các ứng dụng của chúng tôi sẽ không hoạt động bình thường nếu dữ liệu của người dùng được lưu trữ ở định dạng sai, không chính xác hoặc bị bỏ sót hoàn toàn
- Chúng tôi muốn bảo vệ dữ liệu của người dùng. Buộc người dùng của chúng tôi nhập mật khẩu an toàn giúp bảo vệ thông tin tài khoản của họ dễ dàng hơn
- Chúng tôi muốn tự bảo vệ mình. Có nhiều cách mà người dùng độc hại có thể lạm dụng các hình thức không được bảo vệ để làm hỏng ứng dụng. Xem Bảo mật trang web
Cảnh báo. Không bao giờ tin tưởng dữ liệu được chuyển đến máy chủ của bạn từ máy khách. Ngay cả khi biểu mẫu của bạn đang xác thực chính xác và ngăn đầu vào không đúng định dạng ở phía máy khách, người dùng ác ý vẫn có thể thay đổi yêu cầu mạng
Các loại xác thực phía máy khách khác nhau
Có hai loại xác thực phía máy khách khác nhau mà bạn sẽ gặp trên web
- Xác thực biểu mẫu tích hợp sử dụng các tính năng xác thực biểu mẫu HTML mà chúng ta đã thảo luận ở nhiều nơi trong mô-đun này. Việc xác thực này thường không yêu cầu nhiều JavaScript. Xác thực biểu mẫu tích hợp có hiệu suất tốt hơn JavaScript, nhưng nó không thể tùy chỉnh như xác thực JavaScript
- Xác thực JavaScript được mã hóa bằng JavaScript. Xác thực này hoàn toàn có thể tùy chỉnh, nhưng bạn cần tạo tất cả [hoặc sử dụng thư viện]
Sử dụng xác thực biểu mẫu tích hợp
Một trong những tính năng quan trọng nhất của điều khiển biểu mẫu hiện đại là khả năng xác thực hầu hết dữ liệu người dùng mà không cần dựa vào JavaScript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác thực trên các phần tử biểu mẫu. Chúng tôi đã thấy nhiều trong số này sớm hơn trong khóa học, nhưng để tóm tắt lại
8. Chỉ định xem một trường biểu mẫu có cần được điền vào trước khi biểu mẫu có thể được gửi hay khônginput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9 vàinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
0. Chỉ định độ dài tối thiểu và tối đa của dữ liệu văn bản [chuỗi]Would you prefer a banana or cherry? [required] Submit
1 vàWould you prefer a banana or cherry? [required] Submit
2. Chỉ định giá trị tối thiểu và tối đa của các loại đầu vào sốWould you prefer a banana or cherry? [required] Submit
3. Chỉ định xem dữ liệu cần phải là số, địa chỉ email hay một số loại đặt trước cụ thể khácWould you prefer a banana or cherry? [required] Submit
4. Chỉ định một biểu thức chính quy xác định một mẫu mà dữ liệu đã nhập cần tuân theoWould you prefer a banana or cherry? [required] Submit
Nếu dữ liệu được nhập vào trường biểu mẫu tuân theo tất cả các quy tắc được chỉ định bởi các thuộc tính trên, nó được coi là hợp lệ. Nếu không, nó được coi là không hợp lệ
Khi một phần tử hợp lệ, những điều sau đây là đúng
- Phần tử khớp với lớp giả CSS
5, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử hợp lệWould you prefer a banana or cherry? [required] Submit
- Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ gửi biểu mẫu, miễn là không có gì khác ngăn cản việc đó [e. g. , JavaScript]
Khi một phần tử không hợp lệ, những điều sau đây là đúng
- Phần tử khớp với lớp giả CSS
6 và đôi khi là các lớp giả giao diện người dùng khác [e. g. ,Would you prefer a banana or cherry? [required] Submit
7] tùy thuộc vào lỗi, cho phép bạn áp dụng một kiểu cụ thể cho các phần tử không hợp lệWould you prefer a banana or cherry? [required] Submit
- Nếu người dùng cố gắng gửi dữ liệu, trình duyệt sẽ chặn biểu mẫu và hiển thị thông báo lỗi
Ghi chú. Có một số lỗi sẽ khiến biểu mẫu không được gửi, bao gồm
Would you prefer a banana or cherry? [required]
Submit
8,
Would you prefer a banana or cherry? [required]
Submit
9, input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
20 hoặc input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
21, input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
22, input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
23 hoặc input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
24, input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
25, input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
26 hoặc input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
27Ví dụ xác thực biểu mẫu tích hợp
Trong phần này, chúng ta sẽ kiểm tra một số thuộc tính mà chúng ta đã thảo luận ở trên
Tập tin bắt đầu đơn giản
Hãy bắt đầu với một ví dụ đơn giản. một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 với một input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
29 được liên kết và một
Would you prefer a banana or cherry? [required]
Submit
20 gửi. Tìm mã nguồn trên GitHub khi bắt đầu trái cây. html và một ví dụ trực tiếp bên dưới
Would you prefer a banana or cherry? [required]
Submit
3input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
Để bắt đầu, hãy tạo một bản sao của
Would you prefer a banana or cherry? [required]
Submit
21 trong một thư mục mới trên ổ cứng của bạnthuộc tính bắt buộc
Tính năng xác thực HTML đơn giản nhất là thuộc tính
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
8. Để bắt buộc nhập dữ liệu, hãy thêm thuộc tính này vào phần tử. Khi thuộc tính này được đặt, phần tử khớp với lớp giả giao diện người dùng
Would you prefer a banana or cherry? [required]
Submit
23 và biểu mẫu sẽ không gửi, hiển thị thông báo lỗi khi gửi khi đầu vào trống. Trong khi trống, đầu vào cũng sẽ được coi là không hợp lệ, phù hợp với lớp giả giao diện người dùng
Would you prefer a banana or cherry? [required]
Submit
6Thêm thuộc tính
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
8 vào đầu vào của bạn, như hình bên dưới
Would you prefer a banana or cherry? [required]
Submit
Lưu ý CSS được bao gồm trong tệp ví dụ
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
2CSS này làm cho đầu vào có đường viền nét đứt màu đỏ khi không hợp lệ và đường viền màu đen liền tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng xác thực trái cây. html. Xem thêm mã nguồn
Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được đặt tiêu điểm, thông báo lỗi mặc định ["Vui lòng điền vào trường này"] xuất hiện và biểu mẫu không được gửi đi
Sự hiện diện của thuộc tính
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
8 trên bất kỳ phần tử nào hỗ trợ thuộc tính này có nghĩa là phần tử khớp với lớp giả
Would you prefer a banana or cherry? [required]
Submit
23 cho dù nó có giá trị hay không. Nếu input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 không có giá trị, thì
Would you prefer a banana or cherry? [required]
Submit
29 sẽ khớp với lớp giả
Would you prefer a banana or cherry? [required]
Submit
6Ghi chú. Để có trải nghiệm người dùng tốt, hãy cho người dùng biết khi các trường biểu mẫu được yêu cầu. Đó không chỉ là trải nghiệm người dùng tốt mà còn được yêu cầu bởi nguyên tắc trợ năng của WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần. Ví dụ, tại sao bạn thực sự cần biết giới tính hoặc chức danh của ai đó?
Xác thực đối với một biểu thức chính quy
Một tính năng xác thực hữu ích khác là thuộc tính
Would you prefer a banana or cherry? [required]
Submit
4, thuộc tính này mong đợi một Biểu thức chính quy làm giá trị của nó. Biểu thức chính quy [regex] là một mẫu có thể được sử dụng để so khớp các tổ hợp ký tự trong chuỗi văn bản, do đó biểu thức chính quy là lý tưởng để xác thực biểu mẫu và phục vụ nhiều mục đích sử dụng khác trong JavaScriptRegexps khá phức tạp và chúng tôi không có ý định dạy bạn chúng một cách thấu đáo trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn ý tưởng cơ bản về cách chúng hoạt động
2 — So khớp với một ký tự làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
2 [không phảiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4, không phảiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
5, v.v.]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6 — Trận đấu vớiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
2, tiếp theo làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4, tiếp theo làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
60 — Khớp vớiWould you prefer a banana or cherry? [required] Submit
2, tùy chọn theo sau là mộtinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4 duy nhất, theo sau làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9. [input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
64 hoặcWould you prefer a banana or cherry? [required] Submit
6]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
66 — Khớp vớiWould you prefer a banana or cherry? [required] Submit
2, tùy ý theo sau bởi bất kỳ số lượnginput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4 nào, theo sau làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9. [input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
64,Would you prefer a banana or cherry? [required] Submit
6,input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
82, v.v.]Would you prefer a banana or cherry? [required] Submit
83 — So khớp với một ký tự làWould you prefer a banana or cherry? [required] Submit
2 hoặcinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
86 — Khớp chính xác vớiWould you prefer a banana or cherry? [required] Submit
6 hoặc chính xác vớiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
88 [nhưng không khớp vớiWould you prefer a banana or cherry? [required] Submit
89 hoặcWould you prefer a banana or cherry? [required] Submit
2 hoặcinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
71, v.v.]Would you prefer a banana or cherry? [required] Submit
Còn nhiều khả năng nữa mà chúng tôi không đề cập ở đây. Để có danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu Biểu thức chính quy của chúng tôi
Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính
Would you prefer a banana or cherry? [required]
Submit
4 như thế này
Would you prefer a banana or cherry? [required]
Submit
2input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
Điều này cung cấp cho chúng tôi bản cập nhật sau — hãy dùng thử
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng fruit-pattern. html [xem thêm mã nguồn. ]
Trong ví dụ này, phần tử
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 chấp nhận một trong bốn giá trị có thể. các chuỗi "banana", "Banana", "cherry" hoặc "Cherry". Biểu thức chính quy phân biệt chữ hoa chữ thường, nhưng chúng tôi đã làm cho nó hỗ trợ các phiên bản viết hoa cũng như viết thường bằng cách sử dụng mẫu "Aa" bổ sung được lồng trong dấu ngoặc vuôngTại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính
Would you prefer a banana or cherry? [required]
Submit
4 để bằng với một số ví dụ bạn đã xem trước đó và xem điều đó ảnh hưởng như thế nào đến các giá trị bạn có thể nhập để làm cho giá trị đầu vào hợp lệ. Hãy thử viết một số của riêng bạn, và xem nó diễn ra như thế nào. Làm cho chúng liên quan đến trái cây nếu có thể để các ví dụ của bạn có ý nghĩaNếu một giá trị không trống của
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 không khớp với mẫu của biểu thức chính quy, thì
Would you prefer a banana or cherry? [required]
Submit
29 sẽ khớp với lớp giả
Would you prefer a banana or cherry? [required]
Submit
6Ghi chú. Một số loại phần tử
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 không cần thuộc tính
Would you prefer a banana or cherry? [required]
Submit
4 để được xác thực theo biểu thức chính quy. Ví dụ: chỉ định loại
Would you prefer a banana or cherry? [required]
Submit
80 sẽ xác thực giá trị đầu vào dựa trên mẫu địa chỉ email được định dạng tốt hoặc mẫu khớp với danh sách địa chỉ email được phân tách bằng dấu phẩy nếu nó có thuộc tính
Would you prefer a banana or cherry? [required]
Submit
81Ghi chú. Phần tử
Would you prefer a banana or cherry? [required]
Submit
82 không hỗ trợ thuộc tính
Would you prefer a banana or cherry? [required]
Submit
4Hạn chế độ dài của các mục nhập của bạn
Bạn có thể giới hạn độ dài ký tự của tất cả các trường văn bản được tạo bởi
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
28 hoặc
Would you prefer a banana or cherry? [required]
Submit
82 bằng cách sử dụng các thuộc tính input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
9 và
Would you prefer a banana or cherry? [required]
Submit
0. Một trường không hợp lệ nếu nó có một giá trị và giá trị đó có ít ký tự hơn giá trị input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
9 hoặc nhiều hơn giá trị
Would you prefer a banana or cherry? [required]
Submit
0Trình duyệt thường không cho phép người dùng nhập giá trị dài hơn dự kiến vào trường văn bản. Trải nghiệm người dùng tốt hơn so với việc chỉ sử dụng
Would you prefer a banana or cherry? [required]
Submit
0 cũng là cung cấp phản hồi về số lượng ký tự theo cách có thể truy cập và cho phép họ chỉnh sửa nội dung của mình theo kích thước. Một ví dụ về điều này là giới hạn ký tự được thấy trên Twitter khi Tweet. JavaScript, bao gồm các giải pháp sử dụng
Would you prefer a banana or cherry? [required]
Submit
0, có thể được sử dụng để cung cấpHạn chế các giá trị của các mục nhập của bạn
Đối với các trường số [i. e.
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
02], các thuộc tính
Would you prefer a banana or cherry? [required]
Submit
1 và
Would you prefer a banana or cherry? [required]
Submit
2 có thể được sử dụng để cung cấp một loạt các giá trị hợp lệ. Nếu trường chứa một giá trị nằm ngoài phạm vi này, nó sẽ không hợp lệHãy xem một ví dụ khác. Tạo một bản sao mới của fruit-start. tệp html
Bây giờ hãy xóa nội dung của phần tử
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
05 và thay thế nó bằng phần sau
Would you prefer a banana or cherry? [required]
Submit
6- Tại đây, bạn sẽ thấy rằng chúng tôi đã cung cấp cho trường
06 mộtinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9 vàinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
0 của sáu, có cùng độ dài với chuối và anh đàoWould you prefer a banana or cherry? [required] Submit
- Chúng tôi cũng đã cung cấp cho trường
09 mộtinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
1 của một và mộtWould you prefer a banana or cherry? [required] Submit
2 của mười. Các số đã nhập nằm ngoài phạm vi này sẽ hiển thị là không hợp lệ; . Nếu người dùng nhập thủ công một số ngoài phạm vi này, dữ liệu không hợp lệ. Số này không bắt buộc, vì vậy việc xóa giá trị sẽ vẫn dẫn đến một giá trị hợp lệWould you prefer a banana or cherry? [required] Submit
Would you prefer a banana or cherry? [required]
Submit
8Đây là ví dụ đang chạy trực tiếp
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng fruit-length. html. Xem thêm mã nguồn
Ghi chú.
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
02 [và các loại khác, chẳng hạn như input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
13 và input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
14] cũng có thể nhận thuộc tính input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
15, thuộc tính này chỉ định mức tăng hoặc giảm của giá trị khi sử dụng các điều khiển đầu vào [chẳng hạn như các nút số lên và xuống]. Trong ví dụ trên, chúng tôi không bao gồm thuộc tính input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
15, vì vậy giá trị mặc định là input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
17. Điều này có nghĩa là trôi nổi, như 3. 2, cũng sẽ hiển thị là không hợp lệví dụ đầy đủ
Dưới đây là một ví dụ đầy đủ để hiển thị việc sử dụng các tính năng xác thực tích hợp sẵn của HTML. Đầu tiên, một số HTML
Would you prefer a banana or cherry? [required]
Submit
7Và bây giờ là một số CSS để tạo kiểu cho HTML
Would you prefer a banana or cherry? [required]
Submit
8Điều này ám chỉ như sau
Xem Các thuộc tính liên quan đến xác thực để biết danh sách đầy đủ các thuộc tính có thể được sử dụng để hạn chế các giá trị đầu vào và các loại đầu vào hỗ trợ chúng
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng ví dụ đầy đủ. html [xem thêm mã nguồn. ]
Xác thực biểu mẫu bằng JavaScript
Bạn phải sử dụng JavaScript nếu muốn kiểm soát giao diện của các thông báo lỗi gốc. Trong phần này, chúng ta sẽ xem xét các cách khác nhau để thực hiện việc này
API xác thực ràng buộc
API xác thực ràng buộc bao gồm một tập hợp các phương thức và thuộc tính có sẵn trên các giao diện DOM phần tử biểu mẫu sau
18 [đại diện cho phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
20]Would you prefer a banana or cherry? [required] Submit
20 [đại diện cho phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
21]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
22 [đại diện cho một phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
28]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
24 [đại diện cho một phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
25]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
26 [đại diện cho phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
27]input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
28 [đại diện cho phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
82]Would you prefer a banana or cherry? [required] Submit
API Xác thực ràng buộc cung cấp các thuộc tính sau cho các phần tử trên
30. Trả về một thông báo được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không đáp ứng [nếu có]. Nếu điều khiển không phải là ứng cử viên để xác thực ràng buộc [input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
31 làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
32] hoặc giá trị của phần tử thỏa mãn các ràng buộc của nó [là hợp lệ], điều này sẽ trả về một chuỗi trốnginput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
33. Trả về một đối tượnginput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
34 có chứa một số thuộc tính mô tả trạng thái hợp lệ của phần tử. Bạn có thể tìm thấy đầy đủ chi tiết về tất cả các thuộc tính có sẵn trong trang tham khảoinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
34;input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9. Trả vềWould you prefer a banana or cherry? [required] Submit
37 nếu giá trị không khớp vớiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
4 đã chỉ định vàWould you prefer a banana or cherry? [required] Submit
32 nếu nó khớp. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6Would you prefer a banana or cherry? [required] Submit
23. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị dài hơn độ dài tối đa được chỉ định bởi thuộc tínhinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
0 hoặcWould you prefer a banana or cherry? [required] Submit
32 nếu giá trị đó ngắn hơn hoặc bằng độ dài tối đa. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6Would you prefer a banana or cherry? [required] Submit
24. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị ngắn hơn độ dài tối thiểu được chỉ định bởi thuộc tínhinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
9 hoặcinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
32 nếu nó lớn hơn hoặc bằng độ dài tối thiểu. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6Would you prefer a banana or cherry? [required] Submit
20. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị lớn hơn giá trị tối đa được chỉ định bởi thuộc tínhinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
2 hoặcWould you prefer a banana or cherry? [required] Submit
32 nếu giá trị đó nhỏ hơn hoặc bằng giá trị tối đa. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6 vàWould you prefer a banana or cherry? [required] Submit
7Would you prefer a banana or cherry? [required] Submit
21. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị nhỏ hơn giá trị tối thiểu được chỉ định bởi thuộc tínhinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
1 hoặcWould you prefer a banana or cherry? [required] Submit
32 nếu giá trị đó lớn hơn hoặc bằng giá trị tối thiểu. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6 vàWould you prefer a banana or cherry? [required] Submit
7Would you prefer a banana or cherry? [required] Submit
25. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị không theo cú pháp được yêu cầu [khiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
3 làWould you prefer a banana or cherry? [required] Submit
80 hoặcWould you prefer a banana or cherry? [required] Submit
67] hoặcinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
32 nếu cú pháp đúng. Nếuinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6Would you prefer a banana or cherry? [required] Submit
71. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu phần tử đáp ứng tất cả các ràng buộc xác thực của nó và do đó được coi là hợp lệ hoặcinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
32 nếu nó không đáp ứng bất kỳ ràng buộc nào. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
5;Would you prefer a banana or cherry? [required] Submit
26. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu phần tử có thuộc tínhinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
8 nhưng không có giá trị hoặc ngược lại làinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
32. Nếu đúng, phần tử khớp với lớp giả CSSinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
6Would you prefer a banana or cherry? [required] Submit
31. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu phần tử sẽ được xác thực khi biểu mẫu được gửi;input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
API Xác thực ràng buộc cũng cung cấp các phương thức sau cho các phần tử trên và phần tử
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
84
85. Trả vềinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
37 nếu giá trị của phần tử không có vấn đề về tính hợp lệ; . Nếu phần tử không hợp lệ, phương thức này cũng kích hoạt sự kiệninput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
88 trên phần tửinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
89. Báo cáo [các] trường không hợp lệ bằng các sự kiện. Phương pháp này hữu ích khi kết hợp vớiinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
90 trong trình xử lý sự kiệninput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
91input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
92. Thêm thông báo lỗi tùy chỉnh vào phần tử; . Điều này cho phép bạn sử dụng mã JavaScript để thiết lập lỗi xác thực khác với các lỗi được cung cấp bởi các ràng buộc xác thực HTML tiêu chuẩn. Thông báo được hiển thị cho người dùng khi báo cáo sự cốinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
Triển khai thông báo lỗi tùy chỉnh
Như bạn đã thấy trong các ví dụ về ràng buộc xác thực HTML trước đó, mỗi khi người dùng cố gắng gửi biểu mẫu không hợp lệ, trình duyệt sẽ hiển thị thông báo lỗi. Cách thông báo này được hiển thị tùy thuộc vào trình duyệt
Những tin nhắn tự động này có hai nhược điểm
- Không có cách tiêu chuẩn nào để thay đổi giao diện của chúng bằng CSS
- Chúng phụ thuộc vào ngôn ngữ trình duyệt, có nghĩa là bạn có thể có một trang bằng một ngôn ngữ nhưng thông báo lỗi được hiển thị bằng ngôn ngữ khác, như được thấy trong ảnh chụp màn hình Firefox sau
Tùy chỉnh các thông báo lỗi này là một trong những trường hợp sử dụng phổ biến nhất của API Xác thực ràng buộc. Hãy làm việc thông qua một ví dụ đơn giản về cách làm điều này
Chúng ta sẽ bắt đầu với một số mã HTML đơn giản [vui lòng đặt mã này vào tệp HTML trống; sử dụng bản sao mới của fruit-start. html làm cơ sở, nếu bạn thích]
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
0Và thêm đoạn JavaScript sau vào trang
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
1Ở đây, chúng tôi lưu trữ một tham chiếu đến đầu vào email, sau đó thêm một trình lắng nghe sự kiện để chạy mã được chứa mỗi khi giá trị bên trong đầu vào được thay đổi
Bên trong mã được chứa, chúng tôi kiểm tra xem thuộc tính
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
93 của đầu vào email có trả về input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
37 hay không, nghĩa là giá trị được chứa không khớp với mẫu cho địa chỉ email được định dạng tốt. Nếu vậy, chúng tôi gọi phương thức input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
95 với một thông báo tùy chỉnh được hiển thị bằng cách gọi input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
89. Điều này làm cho đầu vào không hợp lệ, do đó khi bạn cố gắng gửi biểu mẫu, gửi không thành công và thông báo lỗi tùy chỉnh được hiển thịNếu thuộc tính
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
93 trả về input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
32, ta gọi phương thức input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
95 là chuỗi rỗng. Điều này làm cho đầu vào hợp lệ, vì vậy biểu mẫu sẽ gửiBạn có thể thử nó dưới đây
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng thông báo lỗi tùy chỉnh. html [xem thêm mã nguồn. ]
Một ví dụ chi tiết hơn
Bây giờ chúng ta đã thấy một ví dụ thực sự đơn giản, hãy xem cách chúng ta có thể sử dụng API này để xây dựng một số xác thực tùy chỉnh phức tạp hơn một chút
Đầu tiên, HTML. Một lần nữa, hãy thoải mái xây dựng cái này cùng với chúng tôi
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
2Biểu mẫu đơn giản này sử dụng thuộc tính
Would you prefer a banana or cherry? [required]
Submit
00 để tắt xác thực tự động của trình duyệt; . Tuy nhiên, điều này không vô hiệu hóa hỗ trợ cho API xác thực ràng buộc cũng như ứng dụng của các lớp giả CSS như
Would you prefer a banana or cherry? [required]
Submit
5, v.v. Điều đó có nghĩa là mặc dù trình duyệt không tự động kiểm tra tính hợp lệ của biểu mẫu trước khi gửi dữ liệu, nhưng bạn vẫn có thể tự mình thực hiện và định kiểu biểu mẫu cho phù hợpĐầu vào của chúng tôi để xác thực là một
Would you prefer a banana or cherry? [required]
Submit
02, là input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
8 và có một input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
9 gồm 8 ký tự. Hãy kiểm tra những mã này bằng mã của riêng chúng tôi và hiển thị thông báo lỗi tùy chỉnh cho từng mãChúng tôi đang cố gắng hiển thị các thông báo lỗi bên trong phần tử
Would you prefer a banana or cherry? [required]
Submit
05. Thuộc tính
Would you prefer a banana or cherry? [required]
Submit
06 được đặt trên
Would you prefer a banana or cherry? [required]
Submit
05 đó để đảm bảo rằng thông báo lỗi tùy chỉnh của chúng tôi sẽ được hiển thị cho tất cả mọi người, kể cả thông báo đó được đọc cho người dùng trình đọc màn hìnhGhi chú. Một điểm quan trọng ở đây là việc đặt thuộc tính
Would you prefer a banana or cherry? [required]
Submit
00 trên biểu mẫu là điều ngăn biểu mẫu hiển thị bong bóng thông báo lỗi của chính nó và thay vào đó cho phép chúng tôi hiển thị các thông báo lỗi tùy chỉnh trong DOM theo một cách nào đó do chúng tôi chọnBây giờ, hãy chuyển sang một số CSS cơ bản để cải thiện một chút giao diện của biểu mẫu và cung cấp một số phản hồi trực quan khi dữ liệu đầu vào không hợp lệ
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
3Bây giờ, hãy xem JavaScript triển khai xác thực lỗi tùy chỉnh
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
4Các ý kiến giải thích mọi thứ khá tốt, nhưng ngắn gọn
- Mỗi khi chúng tôi thay đổi giá trị của đầu vào, chúng tôi sẽ kiểm tra xem nó có chứa dữ liệu hợp lệ không. Nếu có thì chúng tôi sẽ xóa mọi thông báo lỗi đang hiển thị. Nếu dữ liệu không hợp lệ, chúng tôi chạy
09 để hiển thị lỗi thích hợpWould you prefer a banana or cherry? [required] Submit
- Mỗi khi chúng tôi cố gắng gửi biểu mẫu, chúng tôi lại kiểm tra xem dữ liệu có hợp lệ không. Nếu vậy, chúng tôi để biểu mẫu gửi. Nếu không, chúng tôi chạy
09 để hiển thị lỗi thích hợp và dừng gửi biểu mẫu vớiWould you prefer a banana or cherry? [required] Submit
90input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
- Hàm
09 sử dụng các thuộc tính khác nhau của đối tượngWould you prefer a banana or cherry? [required] Submit
33 của đầu vào để xác định lỗi là gì, sau đó hiển thị thông báo lỗi khi thích hợpinput:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
Đây là kết quả trực tiếp
Ghi chú. Bạn có thể tìm thấy ví dụ này trực tiếp trên GitHub dưới dạng xác thực tùy chỉnh chi tiết. html. Xem thêm mã nguồn
API xác thực ràng buộc cung cấp cho bạn một công cụ mạnh mẽ để xử lý xác thực biểu mẫu, cho phép bạn có quyền kiểm soát rất lớn đối với giao diện người dùng ở trên và ngoài những gì bạn có thể làm chỉ với HTML và CSS
Xác thực các biểu mẫu không có API tích hợp
Trong một số trường hợp, chẳng hạn như điều khiển tùy chỉnh, bạn sẽ không thể hoặc không muốn sử dụng API xác thực ràng buộc. Bạn vẫn có thể sử dụng JavaScript để xác thực biểu mẫu của mình, nhưng bạn sẽ phải viết biểu mẫu của riêng mình
Để xác thực một biểu mẫu, hãy tự hỏi mình một số câu hỏi
Tôi nên thực hiện loại xác thực nào?Bạn cần xác định cách xác thực dữ liệu của mình. thao tác chuỗi, chuyển đổi kiểu, biểu thức chính quy, v.v. Tuỳ bạn
Tôi nên làm gì nếu biểu mẫu không hợp lệ?Đây rõ ràng là một vấn đề giao diện người dùng. Bạn phải quyết định biểu mẫu sẽ hoạt động như thế nào. Biểu mẫu có gửi dữ liệu không?
Làm cách nào để giúp người dùng sửa dữ liệu không hợp lệ?Để giảm bớt sự thất vọng của người dùng, điều rất quan trọng là cung cấp càng nhiều thông tin hữu ích càng tốt để hướng dẫn họ sửa lỗi đầu vào của mình. Bạn nên đưa ra các đề xuất trước để họ biết những gì được mong đợi, cũng như các thông báo lỗi rõ ràng. Nếu bạn muốn tìm hiểu các yêu cầu về giao diện người dùng xác thực biểu mẫu, đây là một số bài viết hữu ích bạn nên đọc
- Giúp người dùng nhập đúng dữ liệu vào biểu mẫu
- Xác thực đầu vào
- Cách báo cáo lỗi trong biểu mẫu. 10 nguyên tắc thiết kế
Một ví dụ không sử dụng API xác thực ràng buộc
Để minh họa điều này, sau đây là phiên bản đơn giản hóa của ví dụ trước mà không có API xác thực ràng buộc
HTML gần như giống nhau;
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
5Tương tự, CSS không cần phải thay đổi nhiều;
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
6Những thay đổi lớn nằm trong mã JavaScript, mã này cần thực hiện nhiều công việc nặng nhọc hơn
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
7Kết quả trông như thế này
Như bạn có thể thấy, không khó để tự xây dựng một hệ thống xác thực. Phần khó khăn là làm cho nó đủ chung chung để sử dụng cả đa nền tảng và trên bất kỳ hình thức nào bạn có thể tạo. Có nhiều thư viện có sẵn để thực hiện xác thực biểu mẫu, chẳng hạn như Xác thực. js
Kiểm tra kỹ năng của bạn
Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Xác thực biểu mẫu
Tóm lược
Xác thực biểu mẫu phía máy khách đôi khi yêu cầu JavaScript nếu bạn muốn tùy chỉnh kiểu dáng và thông báo lỗi, nhưng nó luôn yêu cầu bạn phải suy nghĩ cẩn thận về người dùng. Luôn nhớ giúp người dùng của bạn sửa dữ liệu họ cung cấp. Để đạt được điều đó, hãy đảm bảo
- Hiển thị thông báo lỗi rõ ràng
- Được cho phép về định dạng đầu vào
- Chỉ ra chính xác nơi xảy ra lỗi, đặc biệt là trên các biểu mẫu lớn
Khi bạn đã kiểm tra rằng biểu mẫu đã được điền chính xác, biểu mẫu có thể được gửi. Chúng tôi sẽ đề cập đến việc gửi dữ liệu biểu mẫu tiếp theo