Đăng dưới. HTML5, Select, Snippets vào ngày 14 tháng 11 năm 2021
This is a code snippet for HTML Select country code list with flags. It is based on powerful twilio's API. It is plug and play, everything is hosted on CDN. Its usage is simple, simply add this in the of your web page "head" tag.
Now add this tag where you wish it to be displayed
and finally initialize it by this script.
var input = document.querySelector["#phone"];
window.intlTelInput[input, {
separateDialCode: true
}];
It should be rendered like this: Now, there is a number of options that can be used to initialize the select dropdown.var input = document.querySelector["#phone"]; window.intlTelInput[input, { // show dial codes too separateDialCode: true, // If there are some countries you want to show on the top. // here we are promoting russia and singapore. preferredCountries: ["ru", "sg"], //Default country initialCountry:"sg", // show only these countres, remove all other onlyCountries: ["ru", "cn","pk", "sg", "my", "bd"], // If there are some countries you want to execlde. // here we are exluding india and israel. excludeCountries: ["in","il"] }];
Hoàn thành mã
HTML Select Country Phone Code List with Flags var input = document.querySelector["#phone"]; window.intlTelInput[input, { separateDialCode: true, excludeCountries: ["in", "il"], preferredCountries: ["ru", "jp", "pk", "no"] }];
Số điện thoại được chuẩn hóa theo định dạng quốc tế được gọi là E. 164 kết hợp mã quốc gia và số thuê bao ở định dạng như thế này. +14155552671. Định dạng này được yêu cầu bởi nhiều API [bao gồm cả của Twilio] và có nghĩa là bạn không phải lưu trữ mã quốc gia và số điện thoại trong hai cột cơ sở dữ liệu riêng biệt
Tuy nhiên, bạn có thể không muốn người dùng của mình phải nhập dấu + và mã quốc gia khi họ cung cấp số điện thoại của mình cho
- Đăng ký tài khoản mới
- Bật SMS 2FA
- Yêu cầu gọi lại từ dịch vụ khách hàng
- Đăng ký nhận thông báo tiếp thị
Bài đăng trên blog này sẽ hướng dẫn cách xây dựng trường nhập số điện thoại để xử lý và phân tích số điện thoại bằng cách sử dụng HTML, JavaScript cơ bản và plugin intl-tel-input
. Chúng tôi sẽ bao gồm các đề xuất để xác minh số điện thoại và ngăn chặn gian lận
Bạn có thể tìm thấy mã đã hoàn thành trên GitHub của tôi
Plugin intl-tel-input có thể làm gì?
Dự án này sử dụng nhiều intl-tel-input, một "plugin JavaScript để nhập và xác thực các số điện thoại quốc tế". Tôi sẽ đề cập đến cách thiết lập plugin thông thường của mình, nhưng nó có rất nhiều tùy chọn cấu hình bổ sung mà bạn có thể khám phá trong phần
Plugin cung cấp mã quốc gia thả xuống với các cờ đẹp để đại diện cho các quốc gia khác nhau. Nó cũng xử lý số người đăng ký hoặc số "định dạng quốc gia" để chuẩn hóa đầu vào của người dùng có thể bao gồm dấu cách, dấu ngoặc đơn, dấu gạch ngang, v.v.
Nhúng plugin intl-tel-input vào mã của bạn
Chúng tôi sẽ giữ mọi thứ khá đơn giản ở đây và bắt đầu với một số HTML và JavaScript cơ bản. Tạo một tệp mới có tên là index.html
và thêm đoạn mã sau
International telephone input
Điều này kéo các phiên bản CDN của CSS và JS của plugin, giúp chúng tôi hiển thị mã quốc gia thả xuống và xử lý các số điện thoại. Tôi đang sử dụng v17. 0. 8, nhưng bạn có thể tìm thấy phiên bản mới nhất bằng cách kiểm tra các thẻ. Bạn cũng có thể tự cài đặt plugin bằng hoặc và lưu trữ mã nguồn
Để có phong cách đẹp hơn, hãy tạo một tệp mới trong cùng thư mục có tên là
Enter your phone number:
0 và thêm CSS được tìm thấy tại đâyTiếp theo, thêm biểu mẫu sẽ bao gồm đầu vào số điện thoại. Bên trong các thẻ
Enter your phone number:
1 của tệp index.html
, hãy thêm mã HTML sau
Enter your phone number:
Nếu bạn tải tệp này vào trình duyệt tại thời điểm này, bạn sẽ thấy trường biểu mẫu nhưng chưa có định dạng, chúng tôi vẫn cần khởi tạo plugin
Khởi tạo plugin intl-tel-input
Thêm thẻ script bên dưới nội dung nhưng bên trong HTML và thêm mã khởi tạo sau
const phoneInputField = document.querySelector["#phone"];
const phoneInput = window.intlTelInput[phoneInputField, {
utilsScript:
"//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
}];
Enter your phone number:
3 là tùy chọn về mặt kỹ thuật, nhưng nó cung cấp rất nhiều chức năng thực sự hữu ích như trình giữ chỗ dành riêng cho quốc gia và E. 164 chúng tôi sẽ sử dụng bên dướiTải lại trang và bạn sẽ thấy bộ chọn quốc gia và trình giữ chỗ ngay bây giờ
Xử lý đầu vào số điện thoại để có định dạng quốc tế
Thêm một biểu ngữ cảnh báo bên dưới biểu mẫu của chúng tôi. Những điều này sẽ giúp chúng tôi hiển thị kết quả của mình
Tiếp theo, thêm một chức năng để xử lý biểu mẫu gửi. Bên trong thẻ
Enter your phone number:
4 của bạn và sau khi khởi tạo plugin, hãy thêm phần sauconst info = document.querySelector[".alert-info"];
function process[event] {
event.preventDefault[];
const phoneNumber = phoneInput.getNumber[];
info.style.display = "";
info.innerHTML = `Phone number in E.164 format: ${phoneNumber}`;
}
Phần quan trọng nhất ở đây là
Enter your phone number:
5 — đây là mã plugin chuyển đổi mã quốc gia đã chọn và đầu vào của người dùng sang định dạng quốc tếTải lại trang, nhập số điện thoại và bạn sẽ thấy định dạng quốc tế
Thưởng. Làm cho plugin nhận biết vị trí
Plugin mặc định là Hoa Kỳ, nhưng có thể bạn đang triển khai plugin này vì bạn có người dùng toàn cầu. Bạn có thể cập nhật cài đặt thành mặc định cho vị trí của người dùng dựa trên địa chỉ IP của họ
Đăng ký tài khoản miễn phí tại IPinfo và lấy mã thông báo truy cập của bạn. Bạn có thể sử dụng API địa chỉ IP khác cho việc này nếu bạn có một API khác mà bạn thích. Thêm chức năng sau vào đầu thẻ
Enter your phone number:
4 của bạn trước khi xác định đối tượng
Enter your phone number:
7function getIp[callback] {
fetch['//ipinfo.io/json?token=', { headers: { 'Accept': 'application/json' }}]
.then[[resp] => resp.json[]]
.catch[[] => {
return {
country: 'us',
};
}]
.then[[resp] => callback[resp.country]];
}
Sau đó cập nhật khởi tạo intl-tel-input để bao gồm hai tham số.
Enter your phone number:
8 và
Enter your phone number:
9const phoneInput = window.intlTelInput[phoneInputField, {
initialCountry: "auto",
geoIpLookup: getIp,
utilsScript:
"//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
}];
Bây giờ nếu tôi đặt VPN của mình thành Áo, plugin sẽ cập nhật quốc gia mặc định
Thưởng. Thêm quốc gia ưa thích
Một trong những tính năng yêu thích khác của tôi là cài đặt "các quốc gia ưa thích", cho phép bạn chỉ định các quốc gia xuất hiện ở đầu danh sách. Đối với ví dụ này, tôi đã xác định rằng hầu hết người dùng của tôi ở Hoa Kỳ, Colombia, Ấn Độ và Đức và ưu tiên các tùy chọn đó
Bạn có thể cập nhật cài đặt này khi bạn khởi tạo plugin bằng cách thêm một mảng
const phoneInputField = document.querySelector["#phone"];
const phoneInput = window.intlTelInput[phoneInputField, {
utilsScript:
"//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
}];
0 ở định dạng mã ISO 3166-1 alpha-2const phoneInput = window.intlTelInput[phoneInputField, {
preferredCountries: ["us", "co", "in", "de"],
utilsScript:
"//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
}];
Xác thực đầu vào số điện thoại
Bạn có thể nhận thấy rằng biểu mẫu này chưa thực sự ngăn chặn bất kỳ số điện thoại không hợp lệ nào. Bạn có thể theo dõi bài đăng này về cách xác thực đầu vào số điện thoại để chúng tôi không có người gửi những thứ như thế này
Các phương pháp hay nhất để xác minh số điện thoại
Bạn chắc chắn muốn bình thường hóa số điện thoại trong E. 164, nhưng nếu bạn định lưu trữ những số đó, bạn cũng sẽ muốn thực hiện xác minh số điện thoại. Xác minh số điện thoại giúp đảm bảo rằng người dùng không vô tình nhập sai số, rằng họ có quyền kiểm soát số mà họ đang liên kết với tài khoản của mình và rằng bạn không spam nhầm người - bạn hiểu ý. May mắn thay, API xác minh của Twilio giúp dễ dàng thực hiện xác minh điện thoại qua SMS hoặc cuộc gọi thoại. Hãy xem dự án này trên Trao đổi mã của chúng tôi để tìm hiểu cách triển khai mật khẩu một lần [bạn đã đi được nửa đường với thông tin nhập số điện thoại. ]
Bạn cũng có thể quan tâm đến
- Tài liệu API tra cứu Twilio
- Xác minh điện thoại không có máy chủ với Twilio Verify
- Cách khuyến khích người dùng bật 2FA
- Cách tạo thanh toán nhanh bằng xác minh SMS bằng Stripe và Twilio
Câu hỏi về nhập và xác minh số điện thoại? . Tôi không thể chờ đợi để xem những gì bạn xây dựng