主页 / 问题 / 1306491
Accepted
unkn0wn
Asked:2022-07-19 02:58:16 +0000 UTC2022-07-19 02:58:16 +0000 UTC

如何在使用 JS 刷新页面后验证 <input> 内容？

  • 772

有一个带有输入字段的JSP页面，实时检查输入的有效性，并以红色突出显示块，直到输入的数据<input>不满足正则表达式条件。这一切都在街区里<form>。因此，点击按钮后，输入的信息会传输到后端，如果出现任何不正确的字段（在后端进行第二次验证），输入的数据会再次传输到页面，并且页面已经有了输入的数据。只有这里是问题 -输入错误值的字段（根据正则表达式），更新后不再突出显示错误。如何解决？
这是我所做的： validation.js：

window.onload = function(){
    const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

    const accountFirstName = document.getElementById("account_first_name");

    const descriptionAccountFirstName = document.getElementById("description_account_first_name");

    accountFirstName.oninput = function() {
        if(regexpAccountFirstName.test(accountFirstName.value)) {
            descriptionAccountFirstName.style.color = "green";
        } else {
            descriptionAccountFirstName.style.color = "red";
        }
    };
};

这是正则表达式本身：

const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

我们连接到 JSP 页面（我将省略额外的代码）：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page isELIgnored="false"%>

<fmt:setLocale value="${sessionScope.locale_page}"/>
<fmt:setBundle basename="locale"/>

<html lang="en">
<head>
    <meta charset="UTF-8">


    <script src="${pageContext.request.contextPath}/js/validation.js"></script>
    <title>
        <fmt:message key="form.signUp.title"/>
    </title>
</head>
<body>
<div id="container">
    <div id="main">
        <div id="window-title" class="row"><fmt:message key="form.signUp.message"/></div>

        <form action="controller" method="post" novalidate>
            <div class="row">
                <label class="description">
                    <fmt:message key="form.signUp.warning"/>
                </label>
            </div>

            <div class="row">
                <div class="block">
                    <div class="data">
                        <span class="icon icon-user"></span>
                        <input type="text" id="account_first_name" name="account_first_name" value="${account_first_name}" placeholder="<fmt:message key="placeholder.userFirstName"/>" onblur="validationFirstName()" onchange="validationFirstName()">
                    </div>

                    <label id="description_account_first_name" class="description"><fmt:message key="description.valid.userFirstName"/></label>
                </div>
            </div>

            <div class="row">
                <button type="submit" class="button-confirm" name="command" value="sign_up"><fmt:message key="button.label.confirm"/></button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" src="../../static/js/password.js"></script>
</body>
</html>

验证前的字段（以红色突出显示块）：
在此处输入图像描述

单击“确认”按钮并再次返回此验证页面后的字段（不以红色突出显示块）：
在此处输入图像描述

javascript

1 个回答

  1. Best Answer

    您需要在加载表单时调用验证函数。您可能需要调整验证功能以处理空输入。

    window.onload = function(){
  const regexpAccountFirstName = /^\p{Lu}\p{Ll}{2,50}$/u;

  const accountFirstName = document.getElementById("account_first_name");

  const descriptionAccountFirstName = document.getElementById("description_account_first_name");

  function validateAccount() {
      if(regexpAccountFirstName.test(accountFirstName.value)) {
          descriptionAccountFirstName.style.color = "green";
      } else {
          descriptionAccountFirstName.style.color = "red";
      }
  };
  accountFirstName.oninput = validateAccount;
  validateAccount(); // здесь вызываем валидацию вручную при загрузке.
};
    • 0

相关问题