jQuery Validation Plugin,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文件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/