javascript - .val() 不返回输入文本

Question

我可以从 $('#checkEmail').val().trim()) 获取输入文本，但不能从 $('#email').val() 获取输入文本.trim())。如有任何反馈，我们将不胜感激!

我的jsp代码:

            <form:form name="register-form" id="register-form" method="post" commandName="registerForm" action="${registerActionUrl}">
                <div class="newEmail">
                    <h4><spring:theme code="TXT001"/></h4>
                    <input type="text"  name="email" id="email" value="${newUserRegisterForm.email}">
                     <div id="form_errors">
                        <spring:hasBindErrors name="registerForm">
                            <c:forEach var="error" items="${loginerror.allErrors}">
                                <c:if test="${error.field == 'email'}">
                                    <li class="alert negative"><spring:message
                                            code="${empty error.defaultMessage ? error.code : error.defaultMessage}" /></li>
                               </c:if>
                           </c:forEach>
                       </spring:hasBindErrors>
                    </div>
                </div>
                <div class="newCEmail">
                    <h4>Confirm Email</h4>
                    <input type="text" name="checkEmail" id="checkEmail" value="">
                    <div id="form_errors">
                        <spring:hasBindErrors name="registerForm">
                            <c:forEach var="error" items="${loginerror.allErrors}">
                                <c:if test="${error.field == 'checkEmail'}">
                                    <li class="alert negative"><spring:message
                                            code="${empty error.defaultMessage ? error.code : error.defaultMessage}" /></li>
                               </c:if>
                           </c:forEach>
                       </spring:hasBindErrors>
                    </div>
                </div>
            </form:form>

我的 JavaScript:

$('#register-form').on('focusout', '#email, #checkEmail', function() {
    $(this).removeClass('error');
    $(this).parent().find('.error-txt').remove();
    window.alert("email is " + $('#email').val().trim());
    window.alert("checkemail is " + $('#checkEmail').val().trim());

    if (!validateEmail($(this).val())) {
        $(this).addClass('error');
        $(this).parent().append('<p class="error-txt">Please enter valid email</p>');
    } else if ($('#email').val().trim() != "" && $('#checkEmail').val().trim() != "" && $('#checkEmail').val().trim() != $('#email').val().trim()) {
        $(this).addClass('error');
        $(this).parent().append('<p class="error-txt">A different email has been entered in Confirm Email</p>');
    }
});

function validateEmail(email) {
    var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    return re.test(email);
}

我可以从 $('#checkEmail').val().trim()) 获取输入文本，但不能从 $('#email').val() 获取输入文本.trim())。如有任何反馈，我们将不胜感激!

Answer 1

我想您需要首先在标记中添加一个带有 id email 的元素

  <div class="newCEmail">
                <h4>Confirm Email</h4>
                <input type="text" name="email" id="email" value="">
                <input type="text" name="checkEmail" id="checkEmail" value="">
                <div id="form_errors">
                    <spring:hasBindErrors name="registerForm">
                        <c:forEach var="error" items="${loginerror.allErrors}">
                            <c:if test="${error.field == 'checkEmail'}">
                                <li class="alert negative"><spring:message
                                        code="${empty error.defaultMessage ? error.code : error.defaultMessage}" /></li>
                           </c:if>
                       </c:forEach>
                   </spring:hasBindErrors>
                </div>
            </div>

现在您的 js 代码应该按照您的预期工作。