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

您需要添加包含phoneUS规则/方法的additional-methods.js file。

或者，如果您不想包含其他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");

DEMO：http://jsfiddle.net/AFpaC/

jQuery Validation Plugin，phoneUS字段正在打破形式

2 个答案: