使用jquery验证验证国际电话号码输入的有效性

Question

使用jquery验证验证国际电话号码输入的有效性

jqueryjquery-validateintl-tel-input

5

各位朋友们！

我们都知道这个很棒的插件叫做International Telephone Input，那么有没有办法将它自己的验证方法 intlTelInput("isValidNumber") 联接到jQuery Validation中呢？

intlTelInput("isValidNumber") 如果是真则返回true，否则返回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
                    }
                }
            },

        },

现在根据"isValidNumber"方法返回的结果，我需要将验证输出{true,false}传递给jQuery验证，但上面的代码没有起作用。

- Suhayb

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sparky · Accepted Answer

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

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

你目前的写法中，depends 属性表示当电话号码有效且字段未填时，phone 字段是必填的，而当电话号码无效时，该字段不再是必填的。为了确定这一点，该字段必须填写。但如果该字段已经被填写，则 required 规则就不再重要了。因此，如果该字段没有填写（没有有效电话号码），它就不是必填的，也不会进行验证。

如果你想使用 International Telephone Input 插件验证电话号码，那么你需要编写一个自定义规则，使用 .addMethod() 方法调用外部的 .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.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");

这个示例展示了一个用于美国电话号码的正则表达式。您可以修改它以适应您特定的电话号码要求。提示：在您的“国际电话输入”插件中查找正确的正则表达式。