如何添加带有移动号码输入字段的国家代码

Question

我需要在手机号码输入字段前缀中添加国家代码。我试过下面的代码。

 <script>
   var telInput = $("#mobile"),
   errorMsg = $("#error-msg"),
   validMsg = $("#valid-msg");

   // initialise plugin
   telInput.intlTelInput({

   allowExtensions: true,
   formatOnDisplay: true,
   autoFormat: true,
   autoHideDialCode: true,
   autoPlaceholder: true,
   defaultCountry: "in",
   ipinfoToken: "yolo",

   nationalMode: false,
   numberType: "MOBILE",
   //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
   preferredCountries: ['sa', 'ae', 'qa','om','bh','kw','ma'],
   preventInvalidNumbers: true,
   separateDialCode: false,
   initialCountry: "in",
   geoIpLookup: function(callback) {
   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
     var countryCode = (resp && resp.country) ? resp.country : "";
     callback(countryCode);
    });
 },
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"
 });

 var reset = function() {
   telInput.removeClass("error");
   errorMsg.addClass("hide");
   validMsg.addClass("hide");
 };

 // on blur: validate
 telInput.blur(function() {
   reset();
   if ($.trim(telInput.val())) {
     if (telInput.intlTelInput("isValidNumber")) {
       validMsg.removeClass("hide");
     } else {
       telInput.addClass("error");
       errorMsg.removeClass("hide");
     }
   }
 });

 // on keyup / change flag: reset
 telInput.on("keyup change", reset);

</script>

我试过了，它正在起作用。但是我可以在没有国家代码的情况下提交移动电话号码，这是不应该的。国家代码不应是可编辑的。

我使用了下面的js和css：

<link href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/css/intlTelInput.css" rel="stylesheet" media="screen">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/intlTelInput.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"></script>

Answer 1

有一种更好、更灵活的方式来收集电话号码，其形式是优秀的jQuery插件。

您还可以使用活动的这里的演示。

​

​

build/img/flags.png使用是简单的，确保包含了jQuery、库和CSS文件，并且标记sprite是可用的，并从CSS中正确引用--您可以在CSS中找到它。

接下来，创建一个元素：

<input type="tel" id="number">

最后，将其简化如下：

$("#number").intlTelInput();

有关配置选项的完整列表，查阅文件。