JavaScript 大写字母验证问题

Question

第二名必须以大写字母开头。如果我首先输入大写字母，它就会成功提交。

问题是，当我输入小写字母并提交它时，它会向用户抛出错误消息，这是它应该做的。尽管当我用大写字母替换小写字母并尝试再次提交它时，它仍然不会提交，并且仍然显示用户“必须以大写字母开头”。

HTML:

<form name="registrationForm" id="registrationForm" method="get">
    <table cellspacing="5" border="0">
        <tr> 
            <td align="right">First Name:</td> 
            <td>
                <input type="text" name="firstName" id="firstName">
                <span id="firstNameError">*</span>
            </td> 
        </tr>
        <tr> 
            <td align="right">Second Name:</td> 
            <td>
                <input type="text" name="secondName" id="secondName">
                <span id="secondNameError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">Town:</td> 
            <td>
                <input type="text" name="town" id="town">
                <span id="townError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">Country:</td> 
            <td>
                <input type="text" name="country" id="country">
                <span id="countryError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right">E-Mail Address:</td> 
            <td>
                <input type="text" name="emailAddress" id="emailAddress">
                <span id="emailAddressError">*</span>
            </td> 
        </tr>

        <tr> 
            <td align="right"></td>
            <td><input type="button" id="submitRegistationForm" value="Submit"></td>
        </tr>
    </table>
</form>

JavaScript:

var $ = function (id) {
    return document.getElementById(id);
}

var validateRegistrationForm = function () {
    var isValid = true;

    //First Name Validation
    if ($("firstName").value == "") {
        $("firstNameError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("firstNameError").firstChild.nodeValue = "";
    }

    //Second Name Validation
    if ($("secondName").value == "") {
        $("secondNameError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else if ($("firstName").value[0].toUpperCase() != $("firstName").value[0]) {
        $("secondNameError").firstChild.nodeValue = "Must Start With A Capital";
        isValid = false;
    }  else {
        $("secondNameError").firstChild.nodeValue = "";
    }

    //Town Validation
    if ($("town").value == "") {
        $("townError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("townError").firstChild.nodeValue = "";
    }   

    //Country Validation
    if ($("country").value == "") {
        $("countryError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("countryError").firstChild.nodeValue = "";
    }       

    //E-Mail Validation
    if ($("emailAddress").value == "") {
        $("emailAddressError").firstChild.nodeValue = "This Field Is Required";
        isValid = false;
    } else {
        $("emailAddressError").firstChild.nodeValue = "";
    }   

    if (isValid) {
        $("registrationForm").submit();
    }
}

window.onload = function () {
    $("submitRegistationForm").onclick = validateRegistrationForm;
}

Answer 1

我注意到的一件事是，在您的第二名验证中，您有一个 else if 引用您的 firstName。试试这个:

if ($("secondName").value == "") {
    $("secondNameError").firstChild.nodeValue = "This Field Is Required";
    isValid = false;
} else if ($("secondName").value[0].toUpperCase() != $("#secondName").value[0]) {
    $("secondNameError").firstChild.nodeValue = "Must Start With A Capital";
    isValid = false;
}  else {
    $("secondNameError").firstChild.nodeValue = "";
}