Trong quá trình thiết kế website với Elementor Pro, có thể bạn sẽ gặp trường hợp cần lọc và xử lý số điện thoại từ người dùng nhập vào các biểu mẫu (Forms). Bài viết này sẽ hướng dẫn bạn cách thêm một bộ lọc đơn giản để đảm bảo rằng các số điện thoại được nhập vào biểu mẫu tuân thủ đúng định dạng bạn mong muốn.
Vì Sao Cần Bộ Lọc Số Điện Thoại?
Việc đảm bảo rằng số điện thoại nhập vào biểu mẫu có định dạng đúng giúp bạn:
- Giảm thiểu lỗi nhập liệu từ phía người dùng.
- Dễ dàng hơn trong việc quản lý và xử lý dữ liệu sau này.
- Đảm bảo thông tin khách hàng có giá trị và có thể sử dụng được ngay.
- Nâng cao tính bảo mật của website theo nguyên tắc “Không tin tưởng bất kỳ dữ liệu nào của người dùng”.
Code Snippet Thêm Bộ Lọc Số Điện Thoại
Để thêm bộ lọc số điện thoại cho Elementor Pro, bạn có thể thêm đoạn mã sau vào tệp functions.php của giao diện (theme) đang sử dụng:
Đoạn code snippet trên làm gì?
- Hook
elementor_pro/forms/validation: Đây là hook của Elementor Pro được sử dụng để thực hiện kiểm tra và xác thực dữ liệu của biểu mẫu trước khi gửi đi. - Kiểm tra trường
tel: Đoạn mã sẽ lấy tất cả các trường có loại làteltrong biểu mẫu. Nếu không có trường nào, nó sẽ dừng lại. - Kiểm tra độ dài: Đầu tiên, mã sẽ kiểm tra xem số điện thoại có ít nhất 8 ký tự hay không. Nếu không đạt yêu cầu, một lỗi sẽ được thêm vào.
- Kiểm tra định dạng số điện thoại Việt Nam: Sử dụng biểu thức chính quy (regex), mã sẽ kiểm tra xem số điện thoại có tuân thủ định dạng của số điện thoại di động Việt Nam (bao gồm cả mã quốc gia +84 hoặc số bắt đầu bằng 0) hay không. Nếu số không đúng định dạng, một thông báo lỗi sẽ được hiển thị.
Giải thích biểu thức chính quy (regex) đã sử dụng:
- Phần đầu số quốc gia:
(?:\+?84|0): Bắt đầu với+84, hoặc84(không có dấu cộng), hoặc0cho số điện thoại trong nước.
- Phần đầu số nhà mạng
3[2-9]: Chấp nhận các đầu số từ 32 đến 39.5[6|8]: Chấp nhận đầu số 56 và 58.7[0|6|7|8|9]: Chấp nhận các đầu số từ 70, 76, 77, 78, và 79.8[1-5]: Chấp nhận các đầu số từ 81 đến 85.9[0-9]: Chấp nhận các đầu số từ 90 đến 99.
- Phần số điện thoại còn lại:
[0-9]{7}: Chấp nhận bất kỳ 7 chữ số nào để hoàn thành số điện thoại.
Chốt lại
Với đoạn mã đơn giản này, bạn có thể dễ dàng thêm bộ lọc và kiểm tra tính hợp lệ của số điện thoại vào các biểu mẫu được tạo bằng Elementor Pro. Điều này giúp đảm bảo rằng dữ liệu được thu thập từ người dùng là chính xác và dễ dàng xử lý sau này. Hãy thử áp dụng ngay trên website của bạn và tận hưởng sự tiện lợi mà nó mang lại!
