jQuery验证:需要有效的电话或有效的电子邮件 [英] jQuery Validation : require either valid phone or valid email

问题描述

使用jQuery验证的第一天，但​​是使用jQuery验证的第一天.非常简单的问题:我有三个文本输入:姓名，电话和电子邮件.我想输入姓名(不费吹灰之力)和电话或电子邮件，并确保输入在电话或电子邮件中有效.我已经尝试过:

First day with jQuery Validation but not first day with jQuery. Very simple question: I have three text inputs: name, phone, and email. I want to require name (no sweat) and EITHER phone OR email, and make sure the input is valid in EITHER phone OR email. I've tried this with:

$(document).ready(function() {
$("#contactForm").validate({
    debug:true,
    rules: {
        name: {
            required: true
        },
        email: {
            email:true,
            required: function(element){
                !$("#phone").valid();   
            }
        },
        phone: {
            phoneUS: true,
            required: function(element){
                !$("#email").valid();   
            }
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "Please enter a valid email"
        },
        phone: "Please enter a 10 digit phone number"
    }
});

});

但是它失败了，因为每个有效性检查都会调用另一个，从而无限递归并使浏览器崩溃.

But it fails because each validity check calls the other, recursing infinitely and crashing the browser.

必须有一些简单的方法来完成此操作，但是我花了将近两个小时，它才让我:(

There has to be some easy way to do this, but I've spent close to two hours on it and it escapes me :(

推荐答案

好，超级简单的解决方案，忘记了过早发布-拦截表单提交，先手动验证，然后触发插件验证.这是一个示例，需要选择n个复选框之一(根据实际项目进行修改，因此可能会有一些错别字，但您会明白这个意思):

Ok, super simple solution, forgot to post it earlier - intercept the form submission, manually validate first, then trigger plugin validation. Here's an example that requires one of n checkboxes to be selected (adapted from an actual project, so it might have some typos, but you get the jist):

(document).ready(function() {
       // on form submission
       $('form#signup').submit(function() {
                // make sure a checkbox is selected
                var checked = false;
                $('input.checkboxGroupMember').each(function(index) {
                    if ($(this).attr('checked')) {
                        checked = true;
                    }
                });
                if (checked == false) {
                    // do whatever to handle the failure here
                    $('div#feedback').html('Please select a checkbox');
                    return false;
                } else {
                    $('form#signup').validate();
                }

            });

            // once a checkbox is selected, clear feedback
            $('form input.checkboxGroupMember').change(function(index) {
                if ($(this).attr('checked')) {
                    $('div#feedback').empty();
                }
            });

            $('form#signup').validate();
        });

可以轻松地进行调整，以处理不需要通过jQuery验证插件进行的任何验证.

Can be adapted easily to deal with whatever validation is required that you don't want to do via jQuery validation plugin.

这篇关于jQuery验证:需要有效的电话或有效的电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！