Javascript else if 语句意外停止执行

Question

这是我在这里向社区提出的第一个问题，因此请原谅在最佳实践方面的任何不足之处。

我有一个 JavaScript else if 语句，它在 else if 语句的以下片段之后立即停止执行：

} else if (email != '') {
    if (validateEmail(email)) {
        email = email.toLowerCase();
    }
}

我已经尝试完全删除嵌套的 if 语句并将消息记录到控制台以确保当满足 else if 语句的条件时我可以在控制台中进行操作。 例如，本例中控制台的 output 是“email has a value”

} else if (email != '') {
        console.log('email has a value');
    }

之后 else if 语句似乎停止执行。 我真的挂在这里，非常感谢任何指导 - 提前谢谢你。

如果有助于提供一些上下文，以下是一组完整的相关代码：

function applyFocus(target, message) {
    alert(message);
    document.getElementById(target).focus();
}

function validateEmail(mail) {
    var mailLower = mail.toLowerCase();
    if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(mailLower)) {
        console.log('returning true');
        return true;
    } else {
        errorMessage = 'Please enter a valid email address.';
        applyFocus('email', errorMessage);
        console.log('returning false');
        return false;
    }

if (firstName == '') {
    // do something
 } else if (lastName == '') {
    // do something
 } else if (email == '') {
    // do something
 } else if (email != '') {
    if (validateEmail(email)) {
        email = email.toLowerCase();
    }
 } else if (industry == '') {
    // do something
 } else {
     // do something
 }

Answer 1

如果第二个else if条件不满足，那么第三个自动满足，所以后面的永远不会执行。

Answer 2

只有满足条件的第一个（else）if 块才会被执行。

例如：

var a = something;
if (a == '') {
 // Block A
}
else if (a != '') {
  // Block B
}
else if (another condition) {
 // Block C
}

块 C 永远不会被执行，因为前面的条件之一总是会被满足。 之后它不会检查任何东西。 您最有可能想要的是：

 if (firstName == '') {
    // do something
 }

 if (lastName == '') {
    // do something
 } 

 if (email == '') {
    // do something
 } else {
    if (validateEmail(email)) {
        email = email.toLowerCase();
    }
 }

 if (industry == '') {
    // do something
 } else {
     // do something
 }

Answer 3

如果满足一个条件，您可以采取不同的方法并提前返回。

function check() {
    if (firstName === '') {
        // do something
        return;
    }

    if (lastName === '') {
        // do something
        return;
    }

    email = email.toLowerCase();
    if (email === '' || !validateEmail(email)) {
        // do something
        return;
    } 

    if (industry == '') {
        // do something
        return;
    }
}

Answer 4

如果它有用，下面是适用于我的应用程序的最终 JS。 这是使用 email 正则表达式验证对 HTML 表单进行的直接客户端验证。 希望这对外面的人有帮助：

// BEGIN form handling //

function validateForm(e) {

    // Prevent anchor default behavior
    e.preventDefault();
    
    // Collect form data
    var firstName = '';
    firstName = document.getElementById('firstName').value;
    var lastName = '';
    lastName = document.getElementById('lastName').value;
    var email = '';
    email = document.getElementById('email').value;
    email = email.toLowerCase();
    var phoneNumber = '';
    phoneNumber = document.getElementById('phoneNumber').value;
    var companyName = '';
    companyName = document.getElementById('companyName').value;
    var industry = '';
    industry = document.getElementById('industry').value;

    // Create json array to store form data
    var data = {
        firstName : firstName,
        lastName : lastName,
        email : email,
        phoneNumber : phoneNumber,
        companyName : companyName,
        industry : industry
     }

    //error handling
    //alert error, highlight border of form element, add focus
    function applyFocus(target, message) {
        alert(message);
        document.getElementById(target).focus();
    }

    // reset form
    function resetForm() {
        document.getElementById('letsTalkForm').reset();
     }

     // redirect to homepage
    function goHome() {
        window.location.href = './';
    }

    // Send form data via ajax - post request to SMS
    function submitToSMS(){
        var xhttp = new XMLHttpRequest();
        xhttp.open("POST", "REDACTED", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //stringify for AWS lambda
        var payload = JSON.stringify(data);
        //xhttp.send(data);
        xhttp.send(payload);
        console.log('the payload for lambda is: ' + payload);
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log('success');
                // alert sender of successful send
                alert('Thank you for contacting Motiv - We look forward to speaking with you!');
                // clear form fields
                resetForm();
                // redirect to homepage
                goHome();
            } else if (this.readyState == 1) {
                console.log('server connection established');
            } else if (this.readyState == 2) {
                console.log('request received');
            } else if (this.readyState == 3) {
                console.log('processing request');
            } else if (this.readyState == 4) {
                console.log('request finished and response ready');
            } else {
                console.log('something went wrong');
            }
        }
    }

    // Validate form data
    var errorMessage = '';

     if (firstName == '') {
        errorMessage = 'Please let us know your First Name.';
        applyFocus('firstName', errorMessage);
        return false
     } 
     if (lastName == '') {
        errorMessage = 'Please let us know your Last Name.';
        applyFocus('lastName', errorMessage);
        return false
     }
     if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)) {
        console.log('returning true with value: ' + email);
     } else {
        errorMessage = 'Please enter a valid email address.';
        applyFocus('email', errorMessage);
        return false;
     }
     if (industry == '') {
        errorMessage = 'Please let us know your Industry.';
        applyFocus('industry', errorMessage);
     } else {
         console.log ('the value of errorMessage is: ' + errorMessage);
         // submit form data to SMS
         submitToSMS();
         // log data array to console
         console.log(data);
         // Clear form
     }
}

// END form handling //