Javascript 验证不使用INTL-TEL-INPUT

我正在尝试使用国际电话输入

我已经将css包含在工作表的顶部

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

表单元素拾取国家标志，因此插件似乎正在工作，但没有进行验证。js文件是该文件的“编译”版本，我认为它是正确的使用版本——但我已经尝试了编译版本和非编译版本

我错过了什么？为什么验证和格式化不起作用

谢谢

这将对您有所帮助

链接内容：

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

1。包括CSS和JS文件
2.HTML
3.JAVASCRIPT
$（“#手机号码”）.intlTelInput（）；
4.选择权
注：采用国家代码的任何选项应为小写ISO 3166-1 alpha-2代码
autoHideDialCode：如果输入中只有一个拨号代码：在模糊时将其删除，在聚焦时重新添加。这是为了防止在表单中仅提交拨号代码。
类型：布尔值默认值：true
defaultCountry：根据国家代码设置默认国家。否则，它将只是名单上的第一个国家。
类型：字符串默认值：“”
DefaultStyleing：所选标志的位置：“内部”或“外部”（相对于输入）。
类型：字符串默认值：“内部”
dialCodeDelimiter：当用户从下拉列表中选择国家时，选择在拨号代码后插入的分隔符。
类型：字符串默认值：“”
nationalMode：当用户从下拉列表中选择国家时，不要插入国际拨号代码。
类型：布尔值默认值：false
仅限国家：仅显示您指定的国家。
类型：数组默认值：未定义
首选国家/地区：指定要显示在列表顶部的国家/地区。
类型：数组默认值：[“us”，“gb”]
validationScript：通过指定包含的libphonenumber脚本的URL来启用验证。此~200k脚本仅在页面完成加载（以防止阻塞）后获取，然后可通过publicisValidNumber函数访问。
类型：字符串默认值：“示例：”lib/libphonenumber/build/isValidNumber.js”
5.方法
销毁：从输入中删除插件，并取消绑定任何事件侦听器
$（“#手机号码”）.intlTelInput（“销毁”）；
getSelectedCountryData：获取当前所选标志的国家数据
$（“#手机号码”）.intlTelInput（“getSelectedCountryData”）；
返回如下内容：
{
姓名：“阿富汗(‫افغانستان‬‎)",
iso2：“af”，
拨号代码：“93”
}
isValidNumber：使用Google的libphonenumber验证当前号码（需要正确设置validationScript选项）。需要国际格式的号码。也可以传递参数true以接受国家号码。
$（“#手机号码”）.intlTelInput（“isValidNumber”）；
返回值：真/假
选择国家：在初始化后选择一个国家（例如，当用户输入其地址时）
$（“#手机号码”）.intlTelInput（“选择国家”，“gb”）；
setNumber：插入一个数字，并相应地更新所选标志
$（“#移动电话号码”）.intlTelInput（“设置号码”，“+4477333123456”）；
6.静态方法
getCountryData：获取插件的所有国家/地区数据
var countryData=$.fn.intlTelInput.getCountryData（）；
返回国家/地区对象的数组：
[{
姓名：“阿富汗(‫افغانستان‬‎)",
iso2：“af”，
拨号代码：“93”
}, ...]
setCountryData：设置插件的所有国家/地区数据
$.fn.intlTelInput.setCountryData（countryData）；
7.验证
国际号码验证困难（因国家/地区而异）。我找到的唯一全面的解决方案是Google的libphonenumber，我已将其预编译为单个JavaScript文件并包含在lib目录中。不幸的是，即使缩小后，它仍约为200kb，因此我已将其作为可选的额外选项包含在其中。如果指定validationScript选项，则仅当页面已完成加载（以防止阻塞），然后可以通过public isValidNumber函数访问该页面。
8.CSS
图像路径：根据您的项目设置，您可能需要覆盖CSS中flags.png的路径。
.intl tel input.flag{background image:url（“path/to/flags.png”）；}
输入边距：为了对齐，默认CSS强制输入的垂直边距为0px。如果需要垂直边距，应将其添加到容器中（使用类intl tel Input）。
显示错误消息：如果错误处理代码在容器之前插入错误消息，则会破坏布局。相反，必须在容器之前插入错误消息（使用类intl tel input）。
分享

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

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

我通过允许页面完全加载来测试它，验证按预期工作。但是，任何时候我使用Quick时，验证都不起作用。此外，getNumber方法也会返回“”，即使输入字段有值

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

顺便说一句，当验证代码正常工作时，字段内容的格式将与您从“标志”下拉列表中选择的国家/地区的格式相同。例如，当我选择“美国”时，我的默认格式为

---

（202）555-1212要进行工作验证，需要调用utils.js验证函数 参见下面的示例

$（“#电话”）.change（函数（）
{
var telInput=$（“#电话”）；
if（$.trim（telInput.val（）））
{
if（telInput.intlTelInput（“isValidNumber”））
{
log（telInput.intlTelInput（“getNumber”）；
警报（“有效”）；
}
其他的
{
log（telInput.intlTelInput（“getValidationError”）；
警报（“无效”）；
}
}
})；

请

 <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"
});

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