jQuery 验证插件，phoneUS 字段正在打破形式

Question

我一直在使用用于浏览器端验证的 jquery 验证插件开发一个简单的表单，出于某种我不知道的原因，似乎“phoneUS”规则似乎破坏了其余的验证代码。

只要表单上的该字段（“tel”）为空白，验证就会按预期进行。但是，如果在电话字段中输入了任何内容（包括信件），则会跳过验证并提交表单，即使其他必填字段留空也是如此。但是，如果从代码中删除了“phoneUS”规则，则应用于“tel”输入的其他验证规则仍然适用。不用说，我完全糊涂了。

脚本是：

<script type="text/javascript">
$(document).ready(function(){
$('#survey1').validate({
    rules: {
    firstname: {
            required: true,
            },      

    lastname: {
            required: true
            },

    address1: {
            required: true
            },

    city: {
            required: true
            },      

    state: {
            required: true
            },  

    zip: {
            required: true,
            digits: true
            },  

    tel: {
            required: true,
            phoneUS: true
            },  

    email: {
            email: true
            }

   }



   });
});

</script>

标签和输入字段只是名称与脚本匹配的简单文本框。表单操作设置为使用 php 文件将结果通过电子邮件发送到静态电子邮件地址。如果任何其他信息有帮助，我会提供。

我对 jQuery 比较陌生，所以请随意提供指针（多余的字符等）。

谢谢！

Answer 1

jQuery Validate 不附带phoneUS 函数标准；你必须添加它。在你的$('#survey1').validate() 代码之前，调用这个函数：

// Add US Phone Validation
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 enter a valid phone number.');

Answer 2

您需要包含additional-methods.js file，其中包含phoneUS 规则/方法。

或者，如果您不想包含另一个 JavaScript 文件，您可以手动添加 phoneUS 规则/方法：

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");

演示：http://jsfiddle.net/AFpaC/