电子邮件验证无法正常工作

Question

在上面的屏幕截图中，即使电子邮件格式“无效”（不是“gmail.com”格式），也会出现“有效”效果。此效果表现为电子邮件箱的绿色轮廓和绿色复选标记。我该如何解决这个问题，使其像密码字段一样正常工作？

        <form action="/members/new" role="form" method="post"
              class="was-validated" th:object="${memberFormDTO}" novalidate>

            <h2 class="mb-3">Sign Up</h2>
            <hr class="my-4">

            <div class="row g-3">

                <div class="col-12">
                    <label th:for="name" class="form-label">Name</label>
                    <input type="text" th:field="*{name}" class="form-control"
                           placeholder="name" required>
                    <div th:if="${#fields.hasErrors('name')}"
                         th:errors="*{name}"
                         class="invalid-feedback">
                    </div>
                </div>

                <div class="col-12">
                    <label th:for="email" class="form-label">Email</label>
                    <input type="email" th:field="*{email}" class="form-control"
                           placeholder="[email protected]" required pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,}$">
                    <div th:if="${#fields.hasErrors('email')}"
                         th:errors="*{email}"
                         class="invalid-feedback">
                    </div>
                </div>

                <div class="col-12">
                    <label th:for="password" class="form-label">Password</label>
                    <input type="password" th:field="*{password}" class="form-control"
                           placeholder="At least 8 characters" required>
                    <div th:if="${#fields.hasErrors('password')}"
                         th:errors="*{password}"
                         class="invalid-feedback">
                    </div>
                </div>

                <div class="col-12">
                    <label th:for="address" class="form-label">Address</label>
                    <input type="text" th:field="*{address}" class="form-control"
                           placeholder="1234 Main St" required>
                    <div th:if="${#fields.hasErrors('address')}"
                         th:errors="*{address}"
                         class="invalid-feedback">
                    </div>
                </div>

                <button class="btn btn-primary btn-dark btn-lg col-6" type="submit">Sign Up</button>
            </div>
        </form>

我想更正电子邮件验证

Answer 1

<form action="/members/new" role="form" method="post" class="was-validated" th:object="${memberFormDTO}" novalidate>
    <h2 class="mb-3">Sign Up</h2>
    <hr class="my-4">

    <div class="row g-3">
        <div class="col-12">
            <label th:for="name" class="form-label">Name</label>
            <input type="text" th:field="*{name}" class="form-control" placeholder="name" required>
            <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="invalid-feedback"></div>
        </div>

        <div class="col-12">
            <label th:for="email" class="form-label">Email</label>
            <input type="email" th:field="*{email}" class="form-control" placeholder="[email protected]" required pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,}$"
                   th:classappend="${#fields.hasErrors('email')} ? ' is-invalid' : ''">
            <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="invalid-feedback">Please enter a valid email address.</div>
        </div>

        <div class="col-12">
            <label th:for="password" class="form-label">Password</label>
            <input type="password" th:field="*{password}" class="form-control" placeholder="At least 8 characters" required>
            <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="invalid-feedback"></div>
        </div>

        <div class="col-12">
            <label th:for="address" class="form-label">Address</label>
            <input type="text" th:field="*{address}" class="form-control" placeholder="1234 Main St" required>
            <div th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="invalid-feedback"></div>
        </div>

        <button class="btn btn-primary btn-dark btn-lg col-6" type="submit">Sign Up</button>
    </div>
</form>

我的代码的变化：
添加 

th:classappend="${#fields.hasErrors('email')} ? ' is-invalid' : ''"

以应用“无效”电子邮件或不应用。

希望这对您有用，谢谢。

Answer 2

<div class="row g-3">

    <div class="col-12">
        <label th:for="name" class="form-label">Name</label>
        <input type="text" th:field="*{name}" class="form-control" placeholder="name" required>
        <div th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="invalid-feedback"></div>
    </div>

    <div class="col-12">
        <label th:for="email" class="form-label">Email</label>
        <input type="email" th:field="*{email}" class="form-control" placeholder="[email protected]" required pattern="^[\w\.-]+@([\w-]+\.)+[\w-]{2,}$">
        <div th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="invalid-feedback"></div>
        <div class="invalid-feedback">Please enter a valid email address.</div>
    </div>

    <div class="col-12">
        <label th:for="password" class="form-label">Password</label>
        <input type="password" th:field="*{password}" class="form-control" placeholder="At least 8 characters" required>
        <div th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="invalid-feedback"></div>
    </div>

    <div class="col-12">
        <label th:for="address" class="form-label">Address</label>
        <input type="text" th:field="*{address}" class="form-control" placeholder="1234 Main St" required>
        <div th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="invalid-feedback"></div>
    </div>

    <button class="btn btn-primary btn-dark btn-lg col-6" type="submit">Sign Up</button>
</div>