jQuery 验证插件 : How to force a certain phone number format ###-###-####

Question

我的页面上有 jQuery 验证插件。当有人在表单字段中输入电话号码时，我希望验证器仅识别某种格式:

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

我在 JavaScript 中看到了这一点:

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

我可以在那里添加一些内容来指定电话号码所需的格式吗？我发现了一些关于添加 jQuery Mask plugin 的信息，但如果我可以避免它，我宁愿不增加页面重量。 (另外......肯定存在某种方法来仅验证某种格式。)

Answer 1

@Sparky's suggestion如果您有一点灵 active ，那就很好，但万一您想要只是该格式，您可以添加自定义规则:

$.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'
        }
    });
});

示例: http://jsfiddle.net/kqczf/16/

您可以轻松地将其纳入自定义类(class)规则。这样，您只需向您想要拥有规则的每个输入添加一个类，并可能在 validate 调用中省略规则对象:

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

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

示例: http://jsfiddle.net/kqczf/17/