Mã quốc gia html

Tên quốc gia HTML thả xuống Chọn

Tên của các quốc gia có thể được dịch sang các ngôn ngữ khác. Để thay đổi ngôn ngữ, hãy chọn ngôn ngữ từ danh sách ngôn ngữ bên dưới

Tạo một tên quốc gia được chọn tùy chỉnh cho Bootstrap hoặc HTML Select

Chọn tên quốc gia bạn muốn tạo tên quốc gia thả xuống chọn. Mã của các tên quốc gia đã chọn được hiển thị bên dưới. Bạn có thể thay đổi mã cho mã thả xuống quốc gia Bootstrap hoặc cho HTML select

Nếu bạn muốn dịch ngôn ngữ, hãy chọn ngôn ngữ từ danh sách ngôn ngữ ở trên. Và Bạn có thể thay đổi loại mã cho lựa chọn HTML hoặc bootstrap thả xuống

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

 
   International telephone input
   
   
   
   
 
 
 

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à

 
   
Enter your phone number:
   
   
 

 
   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:
   
   
 

Tiế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:
   
   
 

 
   
Enter your phone number:
   
   
 

 
   
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:
   
   
 

Tả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:
   
   
 

const 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:
   
   
 

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:
   
   
 

 
   
Enter your phone number:
   
   
 

 
   International telephone input
   
   
   
   
 
 
 

Sau đó cập nhật khởi tạo intl-tel-input để bao gồm hai tham số.

 
   
Enter your phone number:
   
   
 

 
   
Enter your phone number:
   
   
 

 
   International telephone input
   
   
   
   
 
 
 

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",
   }];
 

 
   International telephone input
   
   
   
   
 
 
 

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

Làm cách nào để thêm mã quốc gia vào trường nhập liệu HTML?

Làm cách nào để lấy mã quốc gia trong số điện thoại trong HTML?

Có mã quốc gia gồm 2 chữ cái không?

Mã quốc gia như thế nào?