jQuery 验证：需要有效的电话或有效的电子邮件

使用 jQuery 验证的第一天，但​​不是使用 jQuery 的第一天。非常简单的问题：我有三个文本输入：姓名、电话和电子邮件。我想要求提供姓名（不费吹灰之力）和电话或电子邮件，并确保电话或电子邮件中的输入有效。我已经尝试过：

$(document).ready(function() {
$("#contactForm").validate({
    debug:true,
    rules: {
        name: {
            required: true
        },
        email: {
            email:true,
            required: function(element){
                !$("#phone").valid();   
            }
        },
        phone: {
            phoneUS: true,
            required: function(element){
                !$("#email").valid();   
            }
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "Please enter a valid email"
        },
        phone: "Please enter a 10 digit phone number"
    }
});

});

但它失败了，因为每个有效性检查都会调用另一个，无限递归并使浏览器崩溃。

必须有一些简单的方法来做到这一点，但我花了将近两个小时，但它却让我无法理解:(

您可以通过以下方式创建自己的方法

$.validator.addMethod(
    "email_or_phone_number", 
    (value, element) => {
        this.optional(element) || /*is optional*/
        /^\d{10,11}$/.test(value) || /*is phone number*/
        /\S+@\S+\.\S+/.test(value) /*is email*/
    },
    "Please enter either phone number or e-mail"
);

现在您可以使用方法“email_or_phone_number” 对于多数据情况：

<input type="text" class="{email_or_phone_number:true}" value="" />

您可以根据自己的需要更改方法内的正则表达式