如何使用jQuery Validation Plugin验证可选输入框中的美国手机号？

原代码的问题 #

你当前的验证逻辑完全不符合需求：你设置的是当手机号长度恰好为11位时才标记为必填，但实际需求是「手机号可选，但若用户填写了内容，必须是合法的美国手机号」。此外，美国手机号的合法格式多样（比如带括号、短横线、国家码等），仅通过长度判断完全不严谨。

正确解决方案 #

1. 添加自定义美国手机号验证规则

首先通过$.validator.addMethod添加一个适配美国手机号格式的自定义验证方法，覆盖常见的合法格式（如(123) 456-7890、123-456-7890、+1 1234567890等）。

2. 修改表单验证规则

给手机号字段设置：可选，但只要填写内容，就必须符合自定义的手机号规则。

完整代码示例 #

HTML部分（保持原结构即可）

<form id="input-form" action="" method="post">
    <p>
      <label for="name">Name <span>(required, at least 3 characters)</span></label>
      <input id="name" name="name">
    </p>
    <p>
      <label for="email">E-Mail <span>(required)</span></label>
      <input id="email" name="email">
    </p>
    <p>
      <label for="phone">Phone <span>(optional, US phone number only)</span></label>
      <input id="phone" name="phone">
    </p>
    <p>
      <input class="submit" type="submit" value="SUBMIT">
    </p>
</form>

JavaScript部分

// 添加自定义美国手机号验证方法
$.validator.addMethod("usPhone", function(value, element) {
    // 匹配常见美国手机号格式：允许带+1、括号、短横线、空格，核心是10位数字（带国家码则11位）
    var phoneRegex = /^(\+1\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}$/;
    // 如果输入为空，返回true（因为字段是可选的）；否则匹配正则
    return this.optional(element) || phoneRegex.test(value);
}, "Please enter a valid US phone number");

$(document).ready(function() {
  $("#input-form").validate({
    rules: {
      name : {
        required: true,
        minlength: 3
      },
      email: {
        required: true,
        email: true
      },
      phone: {
        usPhone: true // 启用自定义验证规则，空值时自动跳过
      }
    },
    messages : {
      name: {
        minlength: "Name should be at least 3 characters"
      },
      email: {
        email: "The email should be in the format: abc@domain.tld"
      }
    }
  });
});

代码说明 #

• 自定义验证方法usPhone中，正则表达式覆盖了美国手机号的常见合法格式，同时通过this.optional(element)保证空值时不触发验证（符合字段可选的需求）。
• 手机号字段的规则仅需设置usPhone: true，插件会自动处理「空值跳过验证，非空值必须符合规则」的逻辑，完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Samiul Lesum