jQuery Validation插件:如何强制使用某种电话号码格式### - ### - ####

Question

我在页面上有jQuery Validation插件.当有人在表单字段中键入电话号码时,我希望验证程序仅识别某种格式:

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

我在JavaScript中看到了这一点:

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

我可以在那里添加一些内容来指定电话号码所需的格式吗？我发现了一些关于添加jQuery Mask插件的东西,但如果我可以避免它,我宁愿不添加页面权重.(另外......当然必须存在某种方式来验证某种格式.)

Answer 1

@斯帕克的建议是好的,如果你是一个灵活一点,但以防万一你想只是该格式,您可以添加自定义规则:

$.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/

您可以轻松地将其转换为自定义类规则.这样,您可以只为要拥有规则的每个输入添加一个类,并可能省略validate调用中的rules对象:

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

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

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

Answer 2

只需使用jQuery Validate插件文件中phoneUS包含的规则即可.additional-methods.js

演示:http://jsfiddle.net/c9zy9/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});

或者,additional-methods.js您可以拔出该phoneUS方法,而不是包含整个文件.

演示:http://jsfiddle.net/dSz5j/

$(document).ready(function () {

    jQuery.validator.addMethod("phoneUS", 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]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
    }, "Please specify a valid phone number");

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});