极客!

我们都知道一个很棒的插件叫做国际电话输入,有没有办法把它自己的验证方法 intlTelInput("isValidNumber") 绑定(bind)到 jquery 验证中?



下面还有更多详细信息!:

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
                    }
                }
            },

        },

现在根据结果“isValidNumber”方法返回我需要将验证输出 {true,false} 传递给 jquery 验证,但上面不起作用

最佳答案

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

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

按照您的编写方式,depends 属性表示当电话号码有效时 phone 字段是 required,而当电话号码无效时该字段不是 required。要做出此决定,必须填写该字段。但是如果该字段已经填写,那么 required 规则就不再重要了。因此,当它只是留空(没有有效的电话号码)时,它不是 required 并且不会验证任何内容。

如果要使用国际电话输入插件验证电话号码,则需要调用此外部 .addMethod() 方法的 write a custom rule using the .intlTelInput() method
$('#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.validator.addMethod("intlTelNumber", function(phone_number, element) {
    phone_number = phone_number.replace( /\s+/g, "" );
return this.optional( element ) || phone_number.length > 9 &&
    phone_number.match( /^(\+?1-?)?(\([2-9]([02-9]\d|1[02-9])\)|[2-9]([02-9]\d|1[02-9]))-?[2-9]([02-9]\d|1[02-9])-?\d{4}$/ );
}, "Please enter a valid International Phone Number");

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

关于jquery - 使用 jquery 验证验证国际电话输入,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38994409/

10-12 12:43
查看更多