我正在尝试实现Intl tel input jQuery插件，用于在提交html表单时验证不同国家的国际手机号码。这里我使用的是版本2.2.4的jQuery和版本17.0.0的Intl tel input jQuery插件。当我试图提交我的表格，然后得到一个未捕获的TypeError。这是我的表单验证脚本
$(document).on('click', '#saveContact' ,function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$('#contactsFrm').bootstrapValidator({
message: 'This value is not valid',
excluded: ':disabled',
fields: {
firstName: {
validators: {
notEmpty: {
message: 'Please enter your first name'
},
stringLength: {
min: 1,
max: 30,
message: 'First name should be in between 1 - 30 Characters'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'Please enter your lastname'
},
stringLength: {
min: 1,
max: 30,
message: 'Last name should be in between 1 - 30 Characters'
}
}
},
username: {
message: 'Please enter a valid Username',
validators: {
notEmpty: {
message: 'Username is required and cannot be empty'
},
regexp: {
regexp: /^[0-9a-zA-Z](?!(?:.*?[._]){2})[._a-zA-Z0-9]{6,18}[0-9a-zA-Z]$/,
message: 'Username should be between 8 - 20 characters, cannot contain blank spaces, or special characters, can contain only one _ or . but not in the beginning or at last'
}
}
},
email: {
validators: {
notEmpty: {
message: 'Email address is required and cannot be empty'
},
emailAddress: {
message: 'Please enter a valid Email Address'
}
}
},
phone1: {
message: 'Please enter a valid phone number',
validators: {
callback:
{
message: 'The phone number is not valid',
callback: function(value, validator, $field)
{
if(value = '')
{
return true;
}
if($field.intlTelInput('isValidNumber'))
{
return true;
}
else
{
return false;
}
}
}
}
}
}
}).on('success.field.bv', function(e, data) {
var $parent = data.element.parents('.form-group');
$parent.removeClass('has-success');
});
if(!($('#contactsFrm').parent().find('.has-error').length))
{
$('#contactsFrm').submit();
}
});
控制台上显示的错误消息是
Uncaught TypeError: $field.intlTelInput is not a function
有人能帮我解决吗？
答案来得很晚，就在我经历了同样的经历之后。根据https://github.com/jackocnr/intl-tel-input/issues/774
First make sure Jquery is loaded above the intelInput js build file.
对于旧版本的Jquery和intelInput使用：
// input id name
var inputJquery = "#telephone";
$(inputJquery).intlTelInput({
formatOnDisplay: false,
nationalMode: false,
autoPlaceholder: 'aggressive',
separateDialCode: true,
preferredCountries: ['BE', 'GB'],
});
对于新版本，请使用：
var input = document.querySelector("#input-phone");
window.intlTelInput(input, {
formatOnDisplay: false,
nationalMode: false,
autoPlaceholder: 'aggressive',
separateDialCode: true,
preferredCountries: ['BE', 'GB'],
});
确保导入jQuery和intlTelInputJavaScript文件请确保将jQuery脚本放在intlTelInput脚本之前(如上(。当然，不要忘记导入intlTelInput样式文件。这应该很好：
<head>
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js"></script>
<!-- ... -->
</head>
<!-- ... -->
<form>
<input type="tel" id="phone" placeholder="Phone">
</form>
<!-- ... -->
<script>
$(document).ready(function(){
$("#phone").intlTelInput({
initialCountry: "us",
separateDialCode: true,
});
});
</script>