验证不适用于 INTL-TEL-INPUT

Posted 2023-05-09

【中文标题】验证不适用于 INTL-TEL-INPUT

【英文标题】：Validation no working with INTL-TEL-INPUT

【发布时间】：2015-07-05 08:29:11

【问题描述】：

我正在尝试使用 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 文件是该文件的“编译”版本，我相信这是正确的使用版本 - 但我已经尝试了编译和非编译版本。

我在这里缺少什么？为什么验证和格式化不起作用？

谢谢。

【参考方案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');
    
  
);

【参考方案2】：

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

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

我通过让页面完全加载来测试它，并且验证按预期工作。但是，无论何时我使用快速，验证都不起作用。此外，即使输入字段有值，getNumber 方法也会返回 ""。

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

顺便说一句，当验证码正常工作时，字段内容将按照您从“标志”下拉列表中选择的国家/地区的样式格式化。例如，当我选择“美国”时，我的默认格式是 [phone]

【讨论】：

我是新手。有人可以帮我理解为什么这被否决了吗？

不确定@Mark，但因为我认为你的回答很有帮助，所以我给了它一个 +1

我有验证工作，但字段内容的格式不是所选国家/地区的样式。知道为什么会这样吗？

@LBecker，我的经验是，如果字段内容不适合国家/地区，则数字未格式化。例如，如果我输入一个美国号码，然后选择英国作为国家/地区，则内容未格式化，因为该号码在英国上下文中没有意义。你能描述更多关于你的问题吗？也许创建一个包含示例和一些代码的新帖子？

【参考方案3】：

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", "[phone]");
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

【讨论】：

请将链接中的信息添加到您的答案中，因为链接可能会失效。

@Mark West ：如果它解决了您的问题，请接受答案。