验证不适用于INTL-TEL-INPUT

Question

我正在尝试使用intl-tel-input ... https://github.com/Bluefieldscom/intl-tel-input#utilities-script

我把css包含在表格的顶部

<link rel="stylesheet" href="css/intlTelInput.css">

我的表单中间有"tel"id ...我也使用欧芹来验证表单的部分,这样工作正常,

<input class="form-control input-sm"  id="tel" name="tel" type="tel" data-parsley-required>

在我的页面底部我包括jquery,bootstrap等...和intl-tel-input js ....

 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/parsley.js"></script>
 <script src="js/intlTelInput.min.js"></script>

然后我初始化实用程序......

$("#tel").intlTelInput({
            utilsScript: "js/utils.js"
});

表单元素选取国家标志,因此插件似乎正在工作,但没有进行验证.utils.js文件是该文件的"已编译"版本,我相信它是正确使用的 - 但我已经尝试了编译和非编译版本.

我在这里失踪了什么？为什么验证和格式化不起作用？

谢谢.

Answer 1

对于工作验证，您需要调用 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');
    }
  }
});

Answer 2

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

\n\n

链接内容：

\n\n

1. INCLUDE CSS AND JS FILES\n<link rel="stylesheet" href="build/css/intlTelInput.css">\n<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>\n<script src="build/js/intlTelInput.min.js"></script>\n2. HTML\n<input type="tel" id="mobile-number">\n3. JAVASCRIPT\n$("#mobile-number").intlTelInput();\n4. OPTIONS\nNote: any options that take country codes should be lower case ISO 3166-1 alpha-2 codes\nautoHideDialCode: 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.\nType: Boolean Default: true\ndefaultCountry: Set the default country by it\'s country code. Otherwise it will just be the first country in the list.\nType: String Default: ""\ndefaultStyling: The position of the selected flag: "inside" or "outside" (relative to the input).\nType: String Default: "inside"\ndialCodeDelimiter: Choose the delimiter that is inserted after the dial code when the user selects a country from the dropdown.\nType: String Default: " "\nnationalMode: Don\'t insert the international dial code when the user selects a country from the dropdown.\nType: Boolean Default: false\nonlyCountries: Display only the countries you specify.\nType: Array Default: undefined\npreferredCountries: Specify the countries to appear at the top of the list.\nType: Array Default: ["us", "gb"]\nvalidationScript: 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.\nType: String Default: "" Example: "lib/libphonenumber/build/isValidNumber.js"\n5. METHODS\ndestroy: Remove the plugin from the input, and unbind any event listeners\n$("#mobile-number").intlTelInput("destroy");\ngetSelectedCountryData: Get the country data for the currently selected flag\n$("#mobile-number").intlTelInput("getSelectedCountryData");\nReturns something like this:\n{\n  name: "Afghanistan (\xe2\x80\xab\xd8\xa7\xd9\x81\xd8\xba\xd8\xa7\xd9\x86\xd8\xb3\xd8\xaa\xd8\xa7\xd9\x86\xe2\x80\xac\xe2\x80\x8e)",\n  iso2: "af",\n  dialCode: "93"\n}\nisValidNumber: 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.\n$("#mobile-number").intlTelInput("isValidNumber");\nReturns: true/false\nselectCountry: Select a country after initialisation (e.g. when the user is entering their address)\n$("#mobile-number").intlTelInput("selectCountry", "gb");\nsetNumber: Insert a number, and update the selected flag accordingly\n$("#mobile-number").intlTelInput("setNumber", "+44 77333 123 456");\n6. STATIC METHODS\ngetCountryData: Get all of the plugin\'s country data\nvar countryData = $.fn.intlTelInput.getCountryData();\nReturns an array of country objects:\n[{\n  name: "Afghanistan (\xe2\x80\xab\xd8\xa7\xd9\x81\xd8\xba\xd8\xa7\xd9\x86\xd8\xb3\xd8\xaa\xd8\xa7\xd9\x86\xe2\x80\xac\xe2\x80\x8e)",\n  iso2: "af",\n  dialCode: "93"\n}, ...]\nsetCountryData: Set all of the plugin\'s country data\n$.fn.intlTelInput.setCountryData(countryData);\n7. VALIDATION\nInternational 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.\n8. CSS\nImage path: Depending on your project setup, you may need to override the path to flags.png in your CSS.\n.intl-tel-input .flag {background-image: url("path/to/flags.png");}\nInput 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).\nDisplaying 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).\nShare\n

\n