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

Posted 2023-05-09

【中文标题】使用 jquery 验证验证国际电话输入

【英文标题】：Validating International Telephone Input using jquery validation

【发布时间】：2016-12-23 23:31:34

【问题描述】：

极客！

我们都知道名为 International Telephone Input 的很棒的插件，有没有办法将它自己的验证方法 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
                    
                
            ,

        ,

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

【参考方案1】：

这个验证逻辑没有意义...

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

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

如果您想使用 International Telephone Input 插件验证电话号码，则需要调用此外部 .intlTelInput() 方法的 write a custom rule using the .addMethod() 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])-?\d4$/ );
, "Please enter a valid International Phone Number");

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

【讨论】：

非常感谢您提供如此科学的答案，我一直尊重具有扎实理论背景的专家（而不是尝试和跟踪）。

phone 字段存在一个问题，它实际上是一个输入数组（phone[]），这可能会影响 jquery 验证，因为 jquery 验证只能处理每个规则的一个字段，因此我决定通过手动添加类错误和跨度来远离 jq 验证的手动验证问题是如果验证字段表单组有错误，如何阻止表单提交？

@SuhaybKharabsheh，我完全回答了您关于 jQuery Validate 插件的问题。如果您决定采用其他方法并遇到新问题，请将其作为新问题发布。

@NarenVerma，好的，谢谢。我确定了答案。 phone_number 应该是进入函数的值参数的名称。从插件的附加方法文件中复制。