Các mẫu xác thực tùy chỉnh cho trường văn bản

A trương Văn bản Ứng dụng chấp nhận mọi thứ người dùng nhập vào—nhưng đôi khi bạn cần các định dạng cụ thể. URL trang web, mã sản phẩm, số giấy phép hoặc tên chỉ gồm các chữ cái đều có các mẫu nhất định để chúng hợp lệ. Các mẫu xác thực tùy chỉnh cho phép bạn xác định chính xác định dạng nào được chấp nhận, giúp phát hiện lỗi trước khi gửi.

Trong hướng dẫn này, bạn sẽ học cách thêm các mẫu xác thực tùy chỉnh vào các trường văn bản trong biểu mẫu WordPress của mình.

Các mẫu xác thực là gì?

Khái niệm

Các mẫu xác thực là các quy tắc xác định dữ liệu đầu vào nào là hợp lệ:

• “Chỉ được chứa các chữ cái”
• “Phải là URL hợp lệ”
• “Phải khớp với định dạng ABC-1234”
• “Phải có chính xác 10 ký tự”

Cách chúng hoạt động

1. Người dùng nhập vào trường văn bản
2. Khi nhấn nút gửi (hoặc khi người dùng đang nhập), dữ liệu nhập vào sẽ được kiểm tra so với mẫu.
3. Nếu khớp: Quá trình xác thực thành công.
4. Nếu không: Thông báo lỗi sẽ được hiển thị.

Các lợi ích

• Chất lượng dữ liệu: Đảm bảo định dạng nhất quán
• Phòng ngừa lỗi: Phát hiện lỗi sớm
• Hướng dẫn sử dụng: Kỳ vọng rõ ràng
• Khả năng tương thích ngược: Dữ liệu hoạt động cùng với các hệ thống khác.

Các mẫu xác thực tích hợp sẵn

Trình tạo biểu mẫu tự động Bao gồm các mẫu phổ biến:

Sử dụng các mẫu có sẵn

Bước 1: Thêm trường văn bản

1. Mở biểu mẫu của bạn trong A.F.B.
2. Kéo bản văn trường để hình thành
3. Nhấp chuột để cấu hình

Bước 2: Chọn mẫu xác thực

1. Tìm kiếm Mẫu xác thực trong phần cài đặt
2. Chọn từ menu thả xuống:
   • Không có (không theo quy luật nào)
   • Email
   • URL
   • Chỉ có chữ
   • Chỉ có số
   • Chữ và số
   • Tuỳ chỉnh
3. Lưu các thiết lập

Bước 3: Kiểm thử xác thực

1. Mẫu xem trước
2. Hãy thử nhập dữ liệu hợp lệ — quá trình sẽ thành công.
3. Hãy thử nhập dữ liệu không hợp lệ — sẽ hiển thị lỗi.

Ví dụ về mẫu và trường hợp sử dụng

Xác thực URL

Dùng cho:

• Lĩnh vực trang web
• Liên kết danh mục đầu tư
• Hồ sơ truyền thông xã hội
• URL tham chiếu

Ví dụ hợp lệ:

• https://example.com
• http://www.example.com/page
• https://example.com/path?query=value

Ví dụ không hợp lệ:

• example.com (thiếu giao thức)
• www.example.com (thiếu giao thức)
• chỉ là một vài đoạn văn bản

Chỉ có chữ

Dùng cho:

• Tên/Họ (xác thực đơn giản)
• Tên thành phố
• Mã quốc gia
• Mã định danh theo bảng chữ cái

Ví dụ hợp lệ:

• nhà vệ sinh
• Smith
• NewYork

Ví dụ không hợp lệ:

• John123
• New York (không gian)
• O'Brien (dấu nháy đơn)

Lưu ý: Chỉ sử dụng chữ cái là bắt buộc. Hãy cân nhắc xem bạn có cần khoảng trắng, dấu gạch ngang hoặc dấu phụ hay không.

Chỉ có số

Dùng cho:

• Số ID
• Số tài khoản
• Số lượng (khi không sử dụng trường số)
• Mã PIN

Ví dụ hợp lệ:

• 12345
• 00123
• 9876543210

Ví dụ không hợp lệ:

• 123-456 (dấu gạch ngang)
• 123.45 (thập phân)
• 12345A

Chữ và số

Dùng cho:

• Mã sản phẩm
• Số tham chiếu
• Tên người dùng
• Số seri

Ví dụ hợp lệ:

• ABC123
• User42
• SẢN PHẨM001

Ví dụ không hợp lệ:

• ABC-123 (dấu gạch ngang)
• ABC 123 (khoảng cách)
• ABC_123 (gạch dưới)

Mẫu xác thực tùy chỉnh (Regex)

Regex là gì?

Biểu thức chính quy (regex) là các mẫu mô tả định dạng văn bản:

• ^ = Bắt đầu chuỗi
• $ = Kết thúc chuỗi
• [A-Z] = Bất kỳ chữ cái viết hoa nào
• [a-z] = Bất kỳ chữ cái viết thường nào
• [0-9] = Bất kỳ chữ số nào
• {3} = Chính xác 3 trong số các trường hợp trước đó
• {2,5} = Từ 2 đến 5 của các trường hợp trước đó
• + = Một hoặc nhiều
• * = Không hoặc nhiều hơn
• ? = Tùy chọn (không hoặc một)

Tạo mẫu tùy chỉnh

1. Chọn “Tùy chỉnh” từ menu thả xuống xác thực.
2. Nhập mẫu biểu thức chính quy của bạn
3. Thử nghiệm với nhiều đầu vào khác nhau

Ví dụ phổ biến về mẫu tùy chỉnh

Mã bưu chính Hoa Kỳ

Mẫu: ^\d{5}(-\d{4})?$

Xác thực:

• 12345 (5 chữ số)
• 12345-6789 (Mã bưu chính+4)

Từ chối:

• 1234 (quá ngắn)
• 123456 (quá dài)
• ABCDE (các chữ cái)

Số điện thoại Hoa Kỳ

Mẫu: ^\d{3}-\d{3}-\d{4}$

Xác thực: 555-123-4567

Đối với định dạng linh hoạt: ^\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}$

Xác thực:

• 555-123-4567
• (555) 123-4567
• 555.123.4567
• 555 123 4567

Mã sản phẩm (định dạng ABC-1234)

Mẫu: ^[A-Z]{3}-\d{4}$

Xác thực:

• ABC-1234
• XYZ-9999
• PRO-0001

Từ chối:

• abc-1234 (chữ thường)
• AB-1234 (chỉ có 2 chữ cái)
• ABC1234 (thiếu dấu gạch ngang)

Biển số xe (Nhiều kiểu dáng)

Mẫu (chung của Mỹ): ^[A-Z0-9]{1,7}$

Xác thực: 1-7 chữ cái/số viết hoa

Thẻ tín dụng (Định dạng cơ bản)

Mẫu: ^\d{4}[\s-]?\d{4}[\s-]?\d{4}[\s-]?\d{4}$

Xác thực:

• 1234567890123456
• 1234 5678 9012 3456
• 1234-5678-9012-3456

Lưu ý: Đối với các khoản thanh toán thực tế, hãy sử dụng các bộ xử lý thanh toán phù hợp với quy trình xác thực của chúng.

Tên người dùng (Chữ cái, Số, Dấu gạch dưới)

Mẫu: ^[a-zA-Z][a-zA-Z0-9_]{2,19}$

Quy tắc:

• Bắt đầu bằng chữ cái
• Tổng cộng 3-20 ký tự
• Chỉ chữ cái, số và dấu gạch dưới

Xác thực: user_123, JohnDoe, test42

Mã màu Hex

Mẫu: ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

Xác thực:

• #FF5733
• #fff
• #ABC123

Ngày (YYYY-MM-DD)

Mẫu: ^\d{4}-\d{2}-\d{2}$

Xác thực: 2026-01-15

Lưu ý: Đối với ngày tháng, việc sử dụng trường Ngày tháng có công cụ chọn ngày thường sẽ tốt hơn.

Thời gian (HH:MM 24 giờ)

Mẫu: ^([01]\d|2[0-3]):[0-5]\d$

Xác thực:

• 09:30
• 14:45
• 23:59

Số hóa đơn (INV-YYYY-NNNN)

Mẫu: ^INV-\d{4}-\d{4}$

Xác thực:

• INV-2026-0001
• INV-2025-1234

Mã số An sinh Xã hội (Hoa Kỳ)

Mẫu: ^\d{3}-\d{2}-\d{4}$

Xác thực: 123-45-6789

Cảnh báo: Cần thận trọng khi thu thập số an sinh xã hội (SSN) — vì nó liên quan đến vấn đề bảo mật và quyền riêng tư.

Tự tạo mẫu riêng của bạn

Quy trình từng bước

1. Xác định các yêu cầu: Bạn cần định dạng nào?
2. Phá vỡ nó: Những nhân vật nào, bao nhiêu nhân vật, theo thứ tự nào?
3. Mô hình xây dựng: Dịch sang biểu thức chính quy
4. Kiểm tra kỹ lưỡng: Đầu vào hợp lệ VÀ không hợp lệ
5. Viết thông báo lỗi: Giúp người dùng hiểu định dạng

Ví dụ: Mã số nhân viên

Yêu cầu: 2 chữ cái + 4 chữ số + 1 chữ cái (ví dụ: AB1234C)

Phá vỡ:

• 2 chữ cái viết hoa: [A-Z]{2}
• 4 chữ số: \d{4}
• 1 chữ cái viết hoa: [A-Z]
• Không có gì trước hoặc sau đó: ^ và $

Mẫu cuối cùng: ^[A-Z]{2}\d{4}[A-Z]$

Mẫu thử nghiệm

Trước khi sử dụng trong biểu mẫu:

• Kiểm tra các dữ liệu đầu vào hợp lệ (phải đạt)
• Kiểm tra các đầu vào không hợp lệ (sẽ báo lỗi)
• Kiểm tra các trường hợp ngoại lệ (ranh giới, ký tự đặc biệt)
• Sử dụng các công cụ kiểm tra biểu thức chính quy trực tuyến để gỡ lỗi.

Thông báo lỗi khi xác thực

Tin nhắn mặc định

• Vui lòng nhập giá trị hợp lệ.
• “Trường này không hợp lệ”

Tin nhắn tùy chỉnh tốt hơn

Hãy cho người dùng biết định dạng mong muốn:

Sử dụng văn bản giữ chỗ và văn bản trợ giúp

Ngăn ngừa lỗi bằng cách hiển thị định dạng ngay từ đầu:

• Trình giữ chỗ: “ABC-1234”
• Văn bản trợ giúp: “Nhập mã sản phẩm của bạn (ví dụ: ABC-1234)”

Thực tiễn tốt nhất

1. Bắt đầu đơn giản

Hãy sử dụng các mẫu có sẵn khi có thể. Biểu thức chính quy tùy chỉnh sẽ làm tăng độ phức tạp.

2. Đừng kiểm tra quá mức

Các khuôn mẫu quá khắt khe gây khó chịu cho người dùng:

• Tên có dấu gạch ngang (Mary-Jane)
• Tên có dấu nháy đơn (O'Brien)
• Các nhân vật quốc tế (José, Müller)

3. Hiển thị định dạng dự kiến

Luôn luôn cho người dùng biết bạn mong đợi điều gì:

• Hình ảnh minh họa kèm ví dụ
• Văn bản trợ giúp giải thích định dạng
• Xóa thông báo lỗi

4. Kiểm thử các trường hợp ngoại lệ

• Đầu vào trống
• Khoảng trắng ở đầu/cuối
• Nhân vật đặc biệt
• Chiều dài tối đa

5. Xem xét lựa chọn thay thế

Đôi khi, những phương pháp khác sẽ tốt hơn:

• Ngày tháng → Sử dụng trường Ngày tháng
• Số → Sử dụng trường Số
• Số điện thoại → Sử dụng trường Số điện thoại với định dạng
• Các tùy chọn cố định → Sử dụng menu thả xuống

Kết hợp với các phương thức xác thực khác

Mẫu + Yêu cầu

• Trường này phải được điền đầy đủ VÀ phải khớp với mẫu.
• Trống không đáp ứng yêu cầu “bắt buộc”
• Định dạng sai sẽ làm hỏng mẫu

Mẫu + Độ dài tối thiểu/tối đa

• Mẫu xác thực định dạng
• Độ dài xác thực kích thước
• Cả hai đều phải vượt qua

Các mẫu khắc phục sự cố

Mẫu không hoạt động

Kiểm tra:

• Cú pháp chính xác (không có lỗi chính tả)
• Các ký tự đặc biệt được thoát đúng cách
• ^ và $ neo nếu cần

Dữ liệu đầu vào hợp lệ bị từ chối

Kiểm tra:

• Mẫu có thể quá khắt khe
• Thiếu các ký tự hợp lệ trong mẫu
• vấn đề phân biệt chữ hoa chữ thường

Dữ liệu đầu vào không hợp lệ đang được chấp nhận.

Kiểm tra:

• Mẫu thiết kế có thể hơi rộng.
• Thiếu dấu neo (^ và $)
• Hãy thử nghiệm với nhiều ví dụ hơn.

Câu Hỏi Thường Gặp

Tôi có thể kết hợp nhiều mẫu họa tiết khác nhau không?

Một trường dữ liệu sử dụng một mẫu biểu thức chính quy. Đối với việc xác thực phức tạp, hãy kết hợp các yêu cầu trong một biểu thức chính quy duy nhất bằng cách sử dụng phép lựa chọn (|) hoặc tạo mẫu để khớp với tất cả các yêu cầu.

Các mẫu có phân biệt chữ hoa chữ thường không?

Mặc định là có. Sử dụng [A-Za-z] để khớp cả hai kiểu chữ, hoặc thêm cờ không phân biệt chữ hoa chữ thường nếu được hỗ trợ.

Tôi cho phép khoảng trắng như thế nào?

Thêm \s vào lớp ký tự của bạn: [A-Za-z\s] khớp với các chữ cái và khoảng trắng.

Còn các nhân vật quốc tế thì sao?

Bảng chữ cái chuẩn [A-Za-z] không bao gồm các ký tự có dấu. Đối với tên quốc tế, hãy xem xét việc nới lỏng quy tắc xác thực hoặc sử dụng \p{L} (nếu được hỗ trợ) cho bất kỳ chữ cái nào.

Tôi nên xác thực khi mất tiêu điểm hay khi gửi biểu mẫu?

Cả hai cách đều hiệu quả. Khi ảnh bị mờ (mất nét) sẽ cho phản hồi nhanh hơn. Khi gửi biểu mẫu sẽ thu thập toàn bộ dữ liệu. Nhiều biểu mẫu sử dụng cả hai cách.

Tổng kết

Thêm các mẫu xác thực tùy chỉnh:

1. Chọn kiểu mẫu – Tích hợp sẵn hoặc tùy chỉnh
2. Cấu hình mẫu – Chọn hoặc nhập biểu thức chính quy
3. Thêm phần giữ chỗ – Hiển thị định dạng dự kiến
4. Thêm văn bản trợ giúp – Giải thích các yêu cầu
5. Đặt thông báo lỗi – Hướng dẫn sửa lỗi
6. Kiểm tra kỹ lưỡng – Đầu vào hợp lệ và không hợp lệ

Kết luận

Các mẫu xác thực tùy chỉnh đảm bảo chất lượng dữ liệu bằng cách thực thi các định dạng cụ thể. Cho dù bạn cần xác thực URL, mã sản phẩm hay mã định danh tùy chỉnh, các mẫu này sẽ phát hiện lỗi trước khi gửi và hướng dẫn người dùng nhập dữ liệu chính xác.

Trình tạo biểu mẫu tự động Bao gồm các mẫu phổ biến (Email, URL, Chữ cái, Số, Chữ và số) và hỗ trợ biểu thức chính quy tùy chỉnh cho các nhu cầu xác thực chuyên biệt. Dữ liệu sạch bắt đầu từ việc xác thực đúng cách.

Bạn đã sẵn sàng xác thực dữ liệu nhập vào biểu mẫu chưa? Tải xuống Auto Form Builder và đảm bảo các biểu mẫu của bạn thu thập dữ liệu được định dạng chính xác.