我在页面上有 jQuery 验证插件。当有人在表单字段中输入电话号码时，我希望验证器只识别某种格式：
###-###-####
我在 JavaScript 中看到了这一点：
phone_number: {
required: true,
number: true
},
我可以在那里添加一些东西来指定电话号码所需的格式吗？我发现了一些关于添加jQuery Mask 插件的信息，但如果我可以避免它，我宁愿不增加页面重量。（另外......当然必须存在某种方法来验证某种格式。）
如果您有点灵活，@Sparky 的建议很好，但如果您只需要这种格式，您可以添加自定义规则：
$.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调用中省略规则对象：
$(document).ready(function () {
$("#myform").validate();
});
<input type="text" name="field1" id="field1" class="required customphone" />
示例：http: //jsfiddle.net/kqczf/17/
只需使用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
}
}
});
});
查看 jQuery Masked Input Plugin。它允许您使用以下内容屏蔽输入：
$("#phone_number").mask("999-999-9999");
你应该试试这个，它可以根据你的要求运作良好
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
phoneUS: true
}
}
});