Question

极客！

我们都知道名为国际电话输入的真棒插件，有没有办法将它自己的验证方法intlTelInput("isValidNumber")绑定到jquery验证？

intlTelInput("isValidNumber")如果为true，则返回 true ;如果为false，则返回 false

下面还有更多细节！：

var handleContactFormValidation = function () {

    var value_form = $('#contact_form');//form i would like to validate where phone field is in!
    var value_error = $('.alert-danger', value_form);
    var value_success = $('.alert-success', value_form);
    value_form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {                             
            phone: {
                required: {
                    depends: function () {
                            if ($(this).intlTelInput("isValidNumber") == true)
                            return true
                        else
                            return false
                    }
                }
            },

        },

现在取决于结果＆＃34; isValidNumber＆＃34;方法返回我需要将验证输出{true，false}传递给jquery验证，但上面没有运行

Answer 1

这种验证逻辑毫无意义......

rules: {                             
    phone: {
        required: {
            depends: function () {
                if ($(this).intlTelInput("isValidNumber") == true)
                    return true
                else
                    return false
            }
        }
    },
},

您编写的方式，depends属性表示当电话号码有效且字段不是{{1时phone字段为required当电话号码无效时。为了做出这个决定，必须填写该字段。但是如果该字段已经填写，则required规则不再重要。因此，当它只是留空（没有有效的电话号码）时，它不是required，也不会验证任何内容。

如果您想使用国际电话输入插件验证电话号码，则您需要write a custom rule using the .addMethod() method调用此外部required方法。

.intlTelInput()

要在不使用国际电话输入插件的情况下执行此操作...

$('#myform').validate({
    .....
    rules: {                             
        phone: {
            required: true,      // field is mandatory
            intlTelNumber: true  // must contain a valid phone number
        },
    },
    ....
});

// create a custom phone number rule called 'intlTelNumber'
jQuery.validator.addMethod("intlTelNumber", function(value, element) {
    return this.optional(element) || $(element).intlTelInput("isValidNumber");
}, "Please enter a valid International Phone Number");

此示例显示美国电话号码的正则表达式。修改它以满足您的特定电话号码要求。提示：查看国际电话输入插件中的正确正则表达式。

使用jquery验证验证国际电话输入

1 个答案: