时间戳

首页 > 解决方案 > Spring + Thymleaf 验证动态生成的字段

java - Spring + Thymleaf 验证动态生成的字段

问题描述

我正在尝试验证动态生成的输入字段。下面的代码会给我们更多的输入：

来自 HTML 的代码：

 <th:block th:each="word,itera : ${credentialsForm.credentialRequirements}">
          <div class="rtr_credential" style="display: inline-block;">
            <span th:text="${word.attribute}" ></span>
            <input type="hidden"  th:name="|credentialRequirements[${itera.index}].attribute|" th:value="${word.attribute}">
          </div>
          <div class="rtr_credential" style="display: inline-block;">
            <input type="text"  name="userValue" th:field="*{credentialRequirements[__${itera.index}__].userValue}" class="userValue" maxlength="30"
              th:classappend="${#fields.hasErrors('userValue')}? has-error : ''">  
          </div>
        </th:block>

它会给出错误，因为 userValue 不在 credentialsForm 中并且如果我包含 th:classappend="${#fields.hasErrors('{credentialRequirements[__${itera.index}__].userValue}')}? has-error : ' '"> 这将引发索引错误。Java类结构：

public class CredentialRequirementForm {


    private List<CredentialRequirements> credentialRequirements;

    public List<CredentialRequirements> getCredentialRequirements() {
        return credentialRequirements;
    }
    public void setCredentialRequirements(List<CredentialRequirements> credentialRequirements) {
        this.credentialRequirements = credentialRequirements;
    }

}

CredentialRequirements.java

public class CredentialRequirements {


    private String attribute;
    private String carrierDescription;
    @NotBlank
    @NotNull
    private String userValue;



    public CredentialRequirements() {
        super();
        // TODO Auto-generated constructor stub
    }

    public CredentialRequirements(String attribute, String carrierDescription, String userValue) {
        super();
        this.attribute = attribute;
        this.carrierDescription = carrierDescription;
        this.userValue = userValue;
    }

    public String getAttribute() {
        return attribute;
    }
    public void setAttribute(String attribute) {
        this.attribute = attribute;
    }
    public String getCarrierDescription() {
        return carrierDescription;
    }
    public void setCarrierDescription(String carrierDescription) {
        this.carrierDescription = carrierDescription;
    }


    public String getUserValue() {
        return userValue;
    }

    public void setUserValue(String userValue) {
        this.userValue = userValue;
    }

    @Override
    public String toString() {
        return "CredentialRequirements [attribute=" + attribute + ", carrierDescription=" + carrierDescription
                + "]";
    }

}

如何验证 userValues，它是动态生成的，有的时候只有 1 个属性，有的时候有 5 个属性。我也在尝试 Jquery 验证，但混淆了如何实现。

标签： javahtmlspring-bootvalidationthymeleaf

解决方案

为什么不简单地使用th:field属性将 HTML 字段绑定到实体字段？然后你可以添加一个带有错误信息的 div（如果会有验证错误）：

<th:block th:each="word,itera : ${credentialsForm.credentialRequirements}">
    <div class="rtr_credential" style="display: inline-block;">
        <span th:text="${word.attribute}" ></span>
        <input type="hidden" th:field="*{credentialRequirements[__${itera.index}__].attribute}">
    </div>
    <div th:if="${#fields.hasErrors('credentialRequirements[__${itera.index}__].userValue')}"  th:errors="*{credentialRequirements[__${itera.index}__].userValue}">
        Error message
    </div>
    <div class="rtr_credential" style="display: inline-block;">
        <input type="text"  name="userValue" th:field="*{credentialRequirements[__${itera.index}__].userValue}" class="userValue">  
    </div>
</th:block>

推荐阅读