0

我正在使用此代码来验证电话号码；我正在使用 Intl-tel-input jQuery 插件来输入和验证国际电话号码

   <link rel="stylesheet" href="/build/css/intlTelInput.css" />
<script src="build/js/intlTelInput.js"></script>
<script src="build/js/utils.js"></script>
<form id="contactForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="tel" class="form-control" name="phoneNumber" />
        </div>
    </div>
</form>
  <script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
<script>
$(document).ready(function() {
    
    $('#contactForm')
        .find('[name="phoneNumber"]')
            .intlTelInput({
                utilsScript: 'build/js/utils.js',
                autoPlaceholder: true,
                preferredCountries: ['fr', 'us', 'gb']
            });

    $('#contactForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                phoneNumber: {
                    validators: {
                        callback: {
                            callback: function(value, validator, $field) {
                                var isValid = value === '' || $field.intlTelInput('isValidNumber'),
                                    err     = $field.intlTelInput('getValidationError'),
                                    message = null;
                                switch (err) {
                                    case intlTelInputUtils.validationError.INVALID_COUNTRY_CODE:
                                        message = 'The country code is not valid';
                                        break;

                                    case intlTelInputUtils.validationError.TOO_SHORT:
                                        message = 'The phone number is too short';
                                        break;

                                    case intlTelInputUtils.validationError.TOO_LONG:
                                        message = 'The phone number is too long';
                                        break;

                                    case intlTelInputUtils.validationError.NOT_A_NUMBER:
                                        message = 'The value is not a number';
                                        break;

                                    default:
                                        message = 'The phone number is not valid';
                                        break;
                                }

                                return {
                                    valid: isValid,
                                    message: message
                                };
                            }
                        }
                    }
                }
            }
        })
        // Revalidate the number when changing the country
        .on('click', '.country-list', function() {
            $('#contactForm').formValidation('revalidateField', 'phoneNumber');
        });
});
</script>

但是我发现了这个错误：

Uncaught TypeError: $(...).find(...).intlTelInput is not a function

我不知道是什么问题，我遇到过很多次这个错误，不知道如何处理它。任何帮助将不胜感激。提前致谢

4

1 回答 1

1

基本上，错误是通知您正在对未声明该函数的对象类型调用函数。

intlTelInput插件向对象注册自身，因此window您需要调用window对象上的函数，将您要使用的元素传递给它。

window.intlTelInput($('#contactForm').find('[name="phoneNumber"]')[0], {
  utilsScript: 'build/js/utils.js',
  autoPlaceholder: true,
  preferredCountries: ['fr', 'us', 'gb']
});

请注意，它.find()返回一个它找到的元素数组，因此您需要指定第一个索引，或者只使用 vanilla JS。

window.intlTelInput(document.querySelector('#phoneNumber'), {
  utilsScript: 'build/js/utils.js',
  autoPlaceholder: true,
  preferredCountries: ['fr', 'us', 'gb']
});

检查一个工作小提琴。

于 2021-05-29T20:25:14.520 回答