Question

好的，所以我一直在寻找JQuery中的条件语句，但我找不到如何检查以确保两个输入框中的至少一个具有内容的解决方案。

这是我到目前为止所拥有的

$('#send').click(function(){ // when the button is clicked the code executes
$('.error').fadeOut('fast'); // reset the error messages (hides them)

var error = false; // we will set this true if the form isn't valid

var name = $('input#namn').val(); // get the value of the input field
var message = $('textarea#meddelande').val(); // get the value of the textarea
var phone = $('input#telefon').val(); // get the value of the input field
var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/; // Syntax to compare against input
var email = $('input#epost').val(); // get the value of the input field

if(name == "" || name == " " || name == "namn" || name.length < 2) {
    $('input#namn').val("namn").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) {
    $('input#telefon').val("telefon").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if (email == "" || email == " " || email == "epost") { // check if the field is empty
    $('input#epost').val("epost").css({ 'color': 'red' });
    error = true;

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
    $('input#epost').val("kontrollera epost").css({ 'color': 'red' });
    error = true;
}

if(message == "" || message == " " || message == "meddelande" || message.length < 10) {
    $('textarea#meddelande').val("meddelande").css({ 'color': 'red' });
    error = true; // change the error state to true
}

if(error == true) {
    $('#err-form').fadeIn('fast');
    return false;
}

var data_string = $('#ajax-contactform').serialize(); // Collect data from form

$.ajax({
    type: "POST",
    url: $('#ajax-contactform').attr('action'),
    data: data_string,
    timeout: 6000,
    error: function(request,error) {
        if (error == "timeout") {
            $('#err-timedout').fadeIn('fast');
        }
        else {
            $('#err-state').fadeIn('fast');
            $("#err-state").html('Ett fel uppstod: ' + error + '');
        }
    },
    success: function() {
        $('#ajax-contactform').fadeOut('fast');
        $('#success-msg').fadeIn('slow');
    }
});

return false; // stops user browser being directed to the php file

}）; //结束点击功能

它的工作正常。但是，我想提出一个条件声明来检查并确保电子邮件或电话有内容。我不想强迫人们不得不离开，但至少有一个。

因此，如果手机有内容（只有数字，而不是单词“telefon”），那么电子邮件不再是强制性的，反之亦然。如果电子邮件包含内容，则仍需要检查以确保其是有效的电子邮件。

我该怎么做呢？我在这里有点失落:(

Answer 1

if (! ( (phone.length && phone != 'telefon') || email.length)) {
    //none of the above has input
}

Answer 2

您可以在手机和电子邮件else if条件之间添加if ..这样，如果phone存在emai，则不会选中，或者email存在..未检查电话

if(phone == "" || phone == " " || phone == "telefon" || phone.length < 5) {
  $('input#telefon').val("telefon").css({ 'color': 'red' });
   error = true; // change the error state to true
} else if (email == "" || email == " " || email == "epost") { // check if the field is empty
//^^^ HERE
   $('input#epost').val("epost").css({ 'color': 'red' });
   error = true;

}else if (!email_compare.test(email)) { // if it's not empty check the format against our email_compare variable
  $('input#epost').val("kontrollera epost").css({ 'color': 'red' });
  error = true;
}

但是我建议你看看jquery validation plugins ...易于使用和自定义...而不是编写整个代码

Answer 3

所以这就是我最终使用的。

$(function() {
        var input = $('input[type=text], textarea');

        input.focus(function() {

             var ibf = $(this);

             if(ibf.val() == ibf.attr('title'))
                 ibf.val('');

             if(ibf.css({ 'color': 'red' }))
                 ibf.css({ 'color': '' });

        }).blur(function() {
             var ibb = $(this);

             if(ibb.val() == '')
                 ibb.val(ibb.attr('title'));
        });

    });

    $("#telefon").keydown(function(e){
        var key = e.charCode || e.keyCode || 0;
        // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
        return (  
            key == 8 ||   
            key == 9 ||  
            key == 46 ||  
            (key >= 37 && key <= 40) ||  
            (key >= 48 && key <= 57) ||  
            (key >= 96 && key <= 105));  
    });

    $('#send').click(function(){ // when the button is clicked the code executes
        $('.error').fadeOut('fast'); // reset the error messages (hides them)

        var error = false; // we will set this true if the form isn't valid

        var name = $('input#namn').val(); // get the value of the input field
        var message = $('textarea#meddelande').val(); // get the value of the input field
        var phone = $('input#telefon').val(); // get the value of the input field
        var email_compare = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); // Syntax to compare against input
        var email = $('input#epost').val(); // get the value of the input field

        if(name == "" || name == " " || name == "namn" || name.length < 2) {
            $('input#namn').val("namn").css({ 'color': 'red' });
            error = true; // change the error state to true
        }

        var phone_valid = phone.length >= 6;
        var email_valid = email_compare.test(email);

        if(phone_valid && phone != 'telefon' || email_valid){ //one of two are populated
            //make donut

        }else{
            /*$('input#telefon').val("telefon").css({ 'color': 'red' });
            $('input#epost').val("epost").css({ 'color': 'red' });
            $('#err-form-contact').fadeIn('fast');*/                
            error = true;

            if (!phone_valid && phone != 'telefon' && phone != ''){
                 $('input#telefon').val("telefon").css({ 'color': 'red' });
            }

            if (!email_valid && email != 'epost' && email != ''){
                $('input#epost').val("epost").css({ 'color': 'red' });
            }
        }

        if(message == "" || message == " " || message == "meddelande" || message.length < 10) {
            $('textarea#meddelande').val("meddelande").css({ 'color': 'red' });
            error = true; // change the error state to true
        }

        if(error == true) {
            $('#err-form').fadeIn('fast');
            return false;
        }

        var data_string = $('#ajax-contactform').serialize(); // Collect data from form

        $.ajax({
            type: "POST",
            url: $('#ajax-contactform').attr('action'),
            data: data_string,
            timeout: 6000,
            error: function(request,error) {
                if (error == "timeout") {
                    $('#err-timedout').fadeIn('fast');
                }
                else {
                    $('#err-state').fadeIn('fast');
                    $("#err-state").html('Ett fel uppstod: ' + error + '');
                }
            },
            success: function() {
                $('#ajax-contactform').fadeOut('fast');
                $('#success-msg').fadeIn('slow');
            }
        });

        return false; // stops user browser being directed to the php file
    }); // end click function

现在它只检查两个盒子中的一个（电子邮件/电话）是否有内容。

联系表单，两个输入字段之一填充检查

3 个答案: