在 javascript 文件中访问 CSS 文件

Question

我有一个用户表单，其中包含名字、姓氏、密码和确认密码字段。现在我添加了密码验证并确认密码以检查两者是否相同。我有 javascript 文件作为

   $(document).ready(function() {
$("#addUser").click(function() {
    var password = document.getElementById('password');
    var confirmPassword = document.getElementById('confirmPassword');
    var message = document.getElementById('confirmMessage');
    var matchingColor = "#008000";
    var nonMatchingColor = "#ff6666";

    if (password.value == confirmPassword.value) {
        confirmPassword.style.backgroundColor = matchingColor;
        message.style.color = matchingColor;
        message.innerHTML = "Passwords Match!"

    } else {
        confirmPassword.style.backgroundColor = nonMatchingColor;
        message.style.color = nonMatchingColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
})

});

现在我必须从 javascript 文件中删除 css 属性。我被要求做类似的事情 $('#classYouWantToChange').addClass('passwordMatch').removeClass('passwordDoNotMatch') 我不确定这是如何工作的。有人能帮忙吗。提前致谢。

这是jsp文件

 <div class="form-horizontal" role="form" id="AddUser">
    <form action="adminAddUserForm" method="post">
        <fieldset>
            <legend>
                <fmt:message key="ManageUsers.ADD_USER" />
            </legend>
        <div class="form-group">
            <label class="control-label col-sm-2" for="firstName"><fmt:message
                    key="addUser.FIRSTNAME_LABEL" /></label> 
            <div class="col-sm-2"> <input type="text" id="firstName" class="form-control" 
                    name="firstName" required aria-required="true" placeholder="Jon"
                    title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" />
                    maxlength="30" pattern="[a-zA-Z]+" />
            </div>
        </div>
        <br />         
        <div class="form-group">
            <label class="control-label col-sm-2" for="lastName"><fmt:message
                    key="addUser.LASTNAME_LABEL" /></label>
            <div class="col-sm-2"> <input type="text" id="lastName" class="form-control"
                    name="lastName" required aria-required="true" placeholder="Doe"
                    title=<fmt:message key="addUser.LASTNAME_LABEL" /> 
                    maxlength="30" pattern="[a-zA-Z]+">
            </div>
        </div>
        <br />         
        <div class="form-group">
            <label class="control-label col-sm-2" for="userName"><fmt:message
                    key="addUser.USERNAME_LABEL" /></label> 
            <div class="col-sm-2"> <input type="text" id="userName" class="form-control" 
                    name="userName" required aria-required="true" placeholder="John_Doe" 
                    title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" />
                    pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" >
            </div>
        </div>
        <br />  
        <div class="form-group">
            <label class="control-label col-sm-2" for="password"><fmt:message
                    key="addUser.PASSWORD_LABEL" /></label> 
            <div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control"
                    title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" />
                    required aria-required="true" pattern="(?=.\d)(?=.[A-Z]).{6,}" >
            </div>
            </div>
        <%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;">
            <h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5>
        </div> --%>
        </br>
        <div class="form-group">
            <label for="confirmPassword" class="control-label col-sm-2"><fmt:message 
                key="addUser.CONFIRM_PASSWORD_LABEL" /></label>
            <div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
                <span id="confirmMessage" class="confirmMessage"></span>
        </div>
        </div>
        <div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;">
            <h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5>
        </div>
            <c:choose>
                <c:when test="${empty signFilter }">
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="role"><fmt:message 
                                key="addUser.ROLE_LABEL" /></label>
                        <input type="radio" id="role" name="userRole" value="ROLE_USER" 
                            checked="checked" /> <fmt:message key="addUser.ROLE_USER" />
                        <input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" />
                            <fmt:message key="addUser.ROLE_INSTRUCTOR" />
                        <input type="radio" id="role" name="userRole" value="ROLE_ADMIN" />
                            <fmt:message key="addUser.ROLE_ADMIN" />
                    </div>
                </c:when>
                <c:otherwise>
                    <input type="hidden" name="userRole" value="ROLE_USER">
                </c:otherwise>
            </c:choose>
            <br />                       
    <div class="form-group">         
        <div class="col-sm-offset-2 col-sm-5" id="addUser">
            <input type="submit" class= "btn btn-info" name="submitBtn" value="Add User">
        </div>
    </div>

Answer 1

您可以使用上述方法，如下所示：

//On event trigger:
//Do validations
//If passwords match, then do this -
$('#idYouWantToModify').addClass('passwordMatch')

//If passwords do not match, then do this -
$('#idYouWantToModify').addClass('passwordDoNotMatch')

//You can remove the classes later if you have any additional steps that want you to do so, by doing the following:
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove')

您可以阅读有关 .addClass() 和 .removeClass() 的更多信息

Answer 2

为了让事情更简单，你可以像这样使用 jquery 切换类

//If passwords match, then do this -
$('#idYouWantToModify').toggleClass('passwordMatch')

如果不存在则添加类，如果存在则删除它

在此处了解更多信息toggleclass