jQuery验证插件：如何强制使用特定的电话号码格式###-###-####

我在一个页面上有jQuery验证插件。当有人在表单字段中键入电话号码时，我希望验证器仅识别特定格式：

###-###-####

我在JavaScript中看到了这一点：

phone_number: {
    required: true,
    number: true 
},

我可以在那里添加一些内容来指定电话号码所需的格式吗？我发现了一些关于添加的东西，但是如果我可以避免的话，我宁愿不增加页面的权重。（另外……肯定有某种方法可以只验证特定格式。）

查看jQuery。它允许您使用以下内容屏蔽输入：

$("#phone_number").mask("999-999-9999");

---

只需使用中包含的

phoneUS

规则即可

演示：

或者，不包括整个

additional methods.js

文件，只需拉出

phoneUS

方法即可

演示：

如果您有一点灵活性，这是很好的，但如果您只需要该格式，您可以添加一个自定义规则：

$.validator.addMethod('customphone', function (value, element) {
    return this.optional(element) || /^\d{3}-\d{3}-\d{4}$/.test(value);
}, "Please enter a valid phone number");

$(document).ready(function () {
    $("#myform").validate({
        rules: {
            field1: 'customphone'
        }
    });
});

示例：

您可以轻松地将其设置为自定义类规则。通过这种方式，您只需将一个类添加到您想要拥有规则的每个输入，并可能从

validate

调用中忽略规则对象：

$(document).ready(function () {
    $("#myform").validate();
});

<input type="text" name="field1" id="field1" class="required customphone" />

$（文档）.ready（函数（）{
$（“#myform”）.validate（）；
});

---

示例：

您应该试试这个，它可以很好地满足您的需求

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

---

这并不是用户想要的——破折号是可选的，并且+1也是允许的。@AndrewHitaker，我很感激，但有时用户甚至不知道这些规则已经存在。在这种情况下，我不知道规则已经存在，所以请您支持。但我们确实需要这种非常精确的格式；就我们目前的目的而言，他们告诉我他们不在乎非美国电话号码。（我想这会从背后咬到他们，但是……好了。他们听到了我的反对意见，他们已经做出了决定。）这已经有一条规则叫做

phoneUS

。它不适用于那种严格的格式，因为它还允许

（）

和破折号可选，但它只接受我们的电话号码。我们真的只需要那种精确的格式，这样当数据传送到CRMs时，它的格式就是我们想要的显示方式。我强烈建议您不要这样做：在客户端，最好是灵活地使用您允许的格式。您的CRM需求是不这样做的一个很弱的理由：在将给定的电话号码传递给CRM之前，您仍然可以在服务器端轻松地将其转换为所需的格式。记住：计算机很擅长在输入中找到模式，但如果人类能够以习惯的方式输入信息，他们会感到最舒服。谢谢您的输入。对于未来的重新设计（大约在6个月内），这是一个悬而未决的问题。但我正在将此表单数据路由到多个不同的CRM中，所有这些我都在边走边学习。我收到所有这些CRM用户的请求，要求以某种方式格式化电话号码。这是我必须做的所有事情之外的事情。就最佳实践而言，CRM中的格式化是最聪明的方法。这个月的时间优先顺序，在前端强制格式化是我现在要做的。好的。请记住，没有启用JavaScript的人将能够输入任何值，因此您必须以任何方式在服务器端进行一些验证…谢谢；但是我想尝试在不添加任何附加插件的情况下完成这项工作。非常有用，谢谢。这正是我想要的。谢谢@Andrew-这看起来像是我想要做的。我是否将其添加到文档标题中，并确保它调用了正确的表单ID？（如果这是一个全局包含，并且我想将此操作添加到几个不同的表单id，那么我可以有多个表单id吗？对于字段1，是否需要匹配字段的类名或id，或者两者都匹配？）您可以使用类规则，我将更新我的答案。如果对每个表单执行此操作，则规则键（

field1

）需要与字段名匹配。听起来使用类规则是您想要的，不过，我会更新答案。@Leigh:您可以在文档标题中放置

$.validator.addMethod

和$.validator.addClassRules`行。对

.validate

的调用应在文档准备就绪时进行。您不需要使用

addClassRules

方法在

类中使用此自定义规则。看：@Sparky：谢谢你的提示，我没想到没有它它也行。
$(document).ready(function () {
    $("#myform").validate();
});

<input type="text" name="field1" id="field1" class="required customphone" />

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});