Javascript 警报消息不起作用，为什么？

Question

Javascript alert message is not working in dev server but works in test instance? Please help to find the issue.

if (expdt.value == "") {
                alert("Expiration Date must be entered");
                expdt.focus();
        formSubmitted = false;
                return false;
        }else
        {
                var dtpattern = /(0|1)[0-9]\/(19|20)[0-9]{2}/;
                if (dtpattern.test(expdt.value))
                {
                        var date_array = expdt.value.split('/');
                        var month = date_array[0]-1;
                        var year = date_array[1];

                        source_date = new Date();

                        if (year >= source_date.getFullYear())
                        {
                                if (month >= source_date.getMonth())
                                {
                                        return '';
                                } else {
                                        if (year == source_date.getFullYear())
                                        {
                                        alert("Expiration Date: Month must be greater than or equal to current month");
                                        expdt.focus();
                                        formSubmitted = false;
                                        return false;
                                        }
                                }
                        } else {
                                alert("Expiration Date: Year must be greater than or equal to current year");
                                expdt.focus();
                formSubmitted = false;
                                return false;
                        }

                }
                else
                {
                        alert("Expiration Date must match the format MM/YYYY");
                        expdt.focus();
                        formSubmitted = false;
                        return false;
                }
        }

 
        if (cardnumber.value == "") {
                alert("Card Number must be entered");
                cardnumber.focus();
                formSubmitted = false;
                return false;
        }

Only expiry date validation alert message is working in dev server but other alert messages after exp date validation also works in test instance. What is the issue? Thanks in advance.

Answer 1

The reason your code doesn't execute the cardnumber validation is when

if (year >= source_date.getFullYear()) {
    if (month >= source_date.getMonth()) {
        return "";
    }

No more checking occurs when this condition is met because you've returned "" , that's it. Function over man!

Try coding without using else - it makes code flatter and more readable

Inverting some of the conditions (eg instead of if (dtpattern.test(expdt.value)) do if (!dtpattern.test(expdt.value)) since you return in that case) you can use a series of so-called "guard clauses" to drastically improve the readability of your code

An example guide on guard clauses - there's many more if you search.

For example - your code is simply this

if (expdt.value == "") {
    alert("Expiration Date must be entered");
    expdt.focus();
    formSubmitted = false;
    return false;
}

var dtpattern = /(0|1)[0-9]\/(19|20)[0-9]{2}/;
if (!dtpattern.test(expdt.value)) {
    alert("Expiration Date must match the format MM/YYYY");
    expdt.focus();
    formSubmitted = false;
    return false;
}

var date_array = expdt.value.split("/");
var month = date_array[0] - 1;
var year = date_array[1];

const source_date = new Date();
const source_year = source_date.getFullYear();
const source_month= source_date.getMonth();

if (year < source_year) {
    alert(
        "Expiration Date: Year must be greater than or equal to current year"
    );
    expdt.focus();
    formSubmitted = false;
    return false;
}

if (month < source_month && year == source_year) {
    alert(
        "Expiration Date: Month must be greater than or equal to current month"
    );
    expdt.focus();
    formSubmitted = false;
    return false;
}

if (cardnumber.value == "") {
    alert("Card Number must be entered");
    cardnumber.focus();
    formSubmitted = false;
    return false;
}

return "";

Notice how all the fail conditions are at the "root" indentation of the code?

Side note: I decided to remove else in a medium sized company PWA - I'm down to ONE in the whole project, and I could remove it fairly easily, but I find that remaining else to be more readable than the alternative