Question

我正在使用JavaScript脚本来验证INTL电话号码的格式。我正在尝试将其与jquery表单验证脚本结合起来。但是我无法弄清楚我在做什么错。

我为验证插件创建了一种方法，该方法仅应检查iti.isValidNumber()，但这似乎无法正常工作，有什么主意吗？

var input = document.querySelector("#phone"),
  errorMsg = document.querySelector("#error-msg"),
  validMsg = document.querySelector("#valid-msg");

// here, the index maps to the error code returned from getValidationError - see readme

var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
// initialise plugin
var iti = window.intlTelInput(input, {
  hiddenInput: "full_phone",
  utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.0/js/utils.js"
});
var reset = function() {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

// on blur: validate
input.addEventListener('blur', function() {
  reset();
  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      var errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);

jQuery.validator.addMethod('validatePhone', function() {
  if ($("#phone").iti.isValidNumber()) {
    return true;
  } else {
    return false;
  }
}, "Number not valid");

$("#infoForm").validate({
  rules: {
    phone: {
      required: true,
      validatePhone: true
    }
  }
});

operator precedence

Answer 1

通常，您需要将所有jQuery代码包装在“文档就绪”函数中，以便jQuery在初始化完成后即可运行。

尝试将所有内容包装在

中

$(function () {
  //all your code here
});

此外，您可以简化此位：

if ($("#phone").iti.isValidNumber()) {
    return true;
  } else {
    return false;
  }

对此：

return $(input).iti.isValidNumber();

jQuery可以接受元素以及CSS选择器字符串，因此，您无需在其中多次包含字符串'#phone'。由于isValidNumber()返回一个布尔值，因此您可以直接使用该值，而不用说“如果为true则返回true，否则为（false）返回false”

Answer 2

您面临的问题是，因为在dom准备就绪之前添加了每个侦听器，所以没有注册任何侦听器。

在DOM准备就绪时，您要做的所有事情就是注册事件，

Updated JSFiddle

像贝娄一样：

$(function() {
    var input = document.querySelector("#phone"),
        errorMsg = document.querySelector("#error-msg"),
        validMsg = document.querySelector("#valid-msg");
    // here, the index maps to the error code returned from getValidationError - see readme
    var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
    // initialise plugin
    var iti = window.intlTelInput(input, {
        hiddenInput: "full_phone",
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.0/js/utils.js"
    });
    var reset = function() {
        input.classList.remove("error");
        errorMsg.innerHTML = "";
        errorMsg.classList.add("hide");
        validMsg.classList.add("hide");
    };

    // on blur: validate
    input.addEventListener('blur', function() {
        reset();
        if (input.value.trim()) {
            if (iti.isValidNumber()) {
                validMsg.classList.remove("hide");
            } else {
                input.classList.add("error");
                var errorCode = iti.getValidationError();
                errorMsg.innerHTML = errorMap[errorCode];
                errorMsg.classList.remove("hide");
            }
        }
    });
    input.addEventListener('change', reset);
    input.addEventListener('keyup', reset);

    jQuery.validator.addMethod('validatePhone', function() {
        if ($("#phone").iti.isValidNumber()) {
            return true;
        } else {
            return false;
        }
    }, "Number not valid");

    $("#infoForm").validate({
        rules: {
            phone: {
                required: true,
                validatePhone: true
            }
        }
    });
});

Answer 3

我最终切换到了intl-tel-input插件的未公开的jQuery版本。没有记录，这有点奇怪。

从Jquery访问Javascript对象

3 个答案: