验证不适用于INTL-TEL-INPUT

3 回答

• 2

  http://js-tutorial.com/international-telephone-input-711这对你有帮助 .

  链接内容：

  1. INCLUDE CSS AND JS FILES
  <link rel="stylesheet" href="build/css/intlTelInput.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="build/js/intlTelInput.min.js"></script>
  2. HTML
  <input type="tel" id="mobile-number">
  3. JAVASCRIPT
  $("#mobile-number").intlTelInput();
  4. OPTIONS
  Note: any options that take country codes should be lower case ISO 3166-1 alpha-2 codes
  autoHideDialCode: If there is just a dial code in the input: remove it on blur, and re-add it on focus. This is to prevent just a dial code getting submitted with the form.
  Type: Boolean Default: true
  defaultCountry: Set the default country by it's country code. Otherwise it will just be the first country in the list.
  Type: String Default: ""
  defaultStyling: The position of the selected flag: "inside" or "outside" (relative to the input).
  Type: String Default: "inside"
  dialCodeDelimiter: Choose the delimiter that is inserted after the dial code when the user selects a country from the dropdown.
  Type: String Default: " "
  nationalMode: Don't insert the international dial code when the user selects a country from the dropdown.
  Type: Boolean Default: false
  onlyCountries: Display only the countries you specify.
  Type: Array Default: undefined
  preferredCountries: Specify the countries to appear at the top of the list.
  Type: Array Default: ["us", "gb"]
  validationScript: Enable validation by specifying the URL to the included libphonenumber script. This ~200k script is fetched only when the page has finished loading (to prevent blocking), and is then accessible through the publicisValidNumber function.
  Type: String Default: "" Example: "lib/libphonenumber/build/isValidNumber.js"
  5. METHODS
  destroy: Remove the plugin from the input, and unbind any event listeners
  $("#mobile-number").intlTelInput("destroy");
  getSelectedCountryData: Get the country data for the currently selected flag
  $("#mobile-number").intlTelInput("getSelectedCountryData");
  Returns something like this:
  {
    name: "Afghanistan (‫افغانستان‬‎)",
    iso2: "af",
    dialCode: "93"
  }
  isValidNumber: Validate the current number using Google's libphonenumber (requires the validationScript option to be set correctly). Expects an internationally formatted number. Optionally pass the argument true to accept national numbers as well.
  $("#mobile-number").intlTelInput("isValidNumber");
  Returns: true/false
  selectCountry: Select a country after initialisation (e.g. when the user is entering their address)
  $("#mobile-number").intlTelInput("selectCountry", "gb");
  setNumber: Insert a number, and update the selected flag accordingly
  $("#mobile-number").intlTelInput("setNumber", "+44 77333 123 456");
  6. STATIC METHODS
  getCountryData: Get all of the plugin's country data
  var countryData = $.fn.intlTelInput.getCountryData();
  Returns an array of country objects:
  [{
    name: "Afghanistan (‫افغانستان‬‎)",
    iso2: "af",
    dialCode: "93"
  }, ...]
  setCountryData: Set all of the plugin's country data
  $.fn.intlTelInput.setCountryData(countryData);
  7. VALIDATION
  International number validation is hard (it varies by country/district). The only comprehensive solution I have found is Google's libphonenumber, which I have precompiled into a single JavaScript file and included in the lib directory. Unfortunately even after minification it is still ~200kb, so I have included it as an optional extra. If you specify the validationScript option then it will fetch the script only when the page has finished loading (to prevent blocking), and will then be accessible through the public isValidNumber function.
  8. CSS
  Image path: Depending on your project setup, you may need to override the path to flags.png in your CSS.
  .intl-tel-input .flag {background-image: url("path/to/flags.png");}
  Input margin: For the sake of alignment, the default CSS forces the input's vertical margin to 0px. If you want vertical margin, you should add it to the container (with class intl-tel-input).
  Displaying error messages: If your error handling code inserts an error message before the <input> it will break the layout. Instead you must insert it before the container (with class intl-tel-input).
  Share
  

  回复于 2024-05-16T13:53:48+08:00
• 0

  对于工作验证，您需要调用utils.js验证函数请参见下面的示例

  $("#tel").change(function()
  {
    var telInput = $("#tel");
    if ($.trim(telInput.val())) 
    {
      if (telInput.intlTelInput("isValidNumber")) 
      {
        console.log(telInput.intlTelInput("getNumber"));
        alert('Valid' );
      }
      else 
      {
        console.log(telInput.intlTelInput("getValidationError"));
        alert('invalid');
      }
    }
  });
  

  回复于 2024-05-16T13:53:48+08:00
• -1

  我有类似的演示文稿的问题，因为它似乎加载模块但我没有得到输入的验证 .

  我发现我的问题是当我尝试访问正在使用它的输入字段时，intlTelInput.js没有完全加载 .

  我通过允许页面完全加载来测试它，并且验证按预期工作 . 但是，无论何时我快速使用，验证都无效 . 此外，即使输入字段具有值，getNumber方法也将返回“” .

  检查两件事：1）使用该字段时intlTelInput.min.js是否已满载？如果没有，则延迟访问该字段，直到加载脚本为止 . 2）utilScript的路径是否正确？验证需要此库 .

  顺便说一句，当验证码工作正常时，字段内容将以您从“标志”下拉列表中选择的国家/地区的格式进行格式化 . 例如，当我选择“US”时，我的默认格式为（202）555-1212

  回复于 2024-05-16T13:53:48+08:00