[JAVA] Ich möchte den Rahmen des Textfelds rot machen, wenn ein Eingabefehler auftritt
Einführung
Ich habe versucht, den Rahmen des Textfelds rot zu machen, als ein Eingabefehler auftrat, aber es fiel mir schwer, ihn zu implementieren, daher werde ich ihn veröffentlichen.
Umgebung
OS: macOS Catalina 10.15.6 JDK:14.0.1 Spring Boot 2.3.3 jquery 3.3.1-1 bootstrap 4.2.1
① Bei der Überprüfung der Eingabe
Bei der Durchführung der Eingabeprüfung (Validierung) hat der Autor die Klasse wie folgt erstellt.
■ Controller-Klasse
SignupController.java
package com.example.demo.login.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.dao.DataAccessException;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import com.example.demo.login.domain.model.GroupOrder;
import com.example.demo.login.domain.model.SignupForm;
import com.example.demo.login.domain.model.User;
import com.example.demo.login.domain.service.UserService;
//Controller für die Registrierung neuer Benutzer
@Controller
public class SignupController {
@Autowired
private UserService userService;
//Übergang zum Benutzerregistrierungsbildschirm
@PostMapping("/signup")
public String postSignUp(@ModelAttribute SignupForm form, Model model) {
return "signup/signup";
}
//Methode zum Ausführen der Registrierung neuer Benutzer
@PostMapping("/signupUser") //Führen Sie die Validierung in der unter "Gruppenreihenfolge" festgelegten Reihenfolge durch.
public String postSignUp(@ModelAttribute @Validated(GroupOrder.class) SignupForm form, BindingResult bindingResult, Model model) {
//Bindungsfehler(Einschließlich Validierungsfehler)Wenn Sie dies tun, wechselt der Bildschirm zum Benutzerregistrierungsbildschirm.
if (bindingResult.hasErrors()) {
return postSignUp(form, model);
}
//Neu registrierten Inhalt auf der Konsole anzeigen
System.out.println(form);
//Erstellen einer Benutzerinstanz
User user = new User();
//Legen Sie den im Registrierungsformular eingegebenen Inhalt in der Benutzerklasse fest
user.setUserId(form.getUserId());
user.setMailAddress(form.getMailAddress());
user.setPassword(form.getPassword());
//Wirf die Verarbeitung mit "Benutzer" in die Serviceklasse, wodurch der Inhalt der Formulareingabe als Argument festgelegt wird
boolean result = userService.insertOne(user);
//Zeigen Sie das Ausführungsergebnis der Registrierungsarbeiten auf der Konsole an
if (result == true) {
System.out.println("Erfolg einfügen");
} else {
System.out.println("Einfügen fehlgeschlagen");
}
//Übergang zum Anmeldebildschirm
return "redirect:/login";
}
}
■ Validierungsgruppe
GroupOrder.java
package com.example.demo.login.domain.model;
import javax.validation.GroupSequence;
//Führen Sie die Validierung in der Reihenfolge "Gültige Gruppe 1" und "Gültige Gruppe 2" aus, wenn Sie einen neuen Benutzer registrieren und die Benutzerregistrierungsinformationen aktualisieren.
@GroupSequence({ValidGroup1.class, ValidGroup2.class})
public interface GroupOrder {
}
ValidGroup1.java
package com.example.demo.login.domain.model;
//ValidGroup1-Schnittstelle
public interface ValidGroup1 {
}
ValidGroup2.java
package com.example.demo.login.domain.model;
//ValidGroup2-Schnittstelle
public interface ValidGroup2 {
}
■ Formularklasse eingeben
SignupForm.java
package com.example.demo.login.domain.model;
import javax.validation.constraints.Email;
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.Pattern;
import org.hibernate.validator.constraints.Length;
import lombok.Data;
//Anmeldeformular, das im Registrierungsformular für neue Benutzer verwendet wird
@Data
public class SignupForm {
/*
*null Leerzeichen halber Breite Ein Fehler tritt auf, wenn das Zeichen leer ist(Als gültige Gruppe 1 eingestuft)
*3 bis 20 Zeichen(Als gültige Gruppe 2 eingestuft)
*/
@NotBlank(groups = ValidGroup1.class)
@Length(min = 3, max = 20, groups = ValidGroup2.class)
private String userId;
/*
*null Leerzeichen halber Breite Ein Fehler tritt auf, wenn das Zeichen leer ist(Als gültige Gruppe 1 eingestuft)
*Ein Fehler tritt auf, wenn das Format nicht die E-Mail-Adresse ist(Als gültige Gruppe 2 eingestuft)
*/
@NotBlank(groups = ValidGroup1.class)
@Email(groups = ValidGroup2.class)
private String mailAddress;
/*
*null Leerzeichen halber Breite Ein Fehler tritt auf, wenn das Zeichen leer ist(Als gültige Gruppe 1 eingestuft)
*3 bis 20 Zeichen(Als gültige Gruppe 2 eingestuft)
*Nur Alphabet(Als gültige Gruppe 2 eingestuft)
*/
@NotBlank(groups = ValidGroup1.class)
@Length(min = 3, max = 20, groups = ValidGroup2.class)
@Pattern(regexp = "^[a-zA-Z0-9]+$", groups = ValidGroup2.class)
private String password;
}
■ Fehlermeldung
messages.properties
#Validierungsfehlermeldung
signupForm.userId=Benutzeridentifikation
NotBlank.signupForm.userId={0}Bitte eingeben
Length.signupForm.userId={0}Ist{2}Mehr als Briefe{１}Bitte geben Sie unter dem Buchstaben ein
signupForm.mailAddress=Mail Adresse
NotBlank.signupForm.mailAddress={0}Bitte eingeben
Email.signupForm.mailAddress=Bitte geben Sie das E-Mail-Adressformat ein
signupForm.password=
NotBlank.signupForm.password={0}
Length.signupForm.password={0}{2}{１}
Pattern.signupForm.password={0}
searchForm.keyword=Bitte geben Sie mehr als ein Zeichen und weniger als ein Zeichen ein. Bitte geben Sie ein alphanumerisches Zeichen mit halber Breite ein
NotBlank.searchForm.keyword={0}Bitte eingeben
#Passen Sie die Anmeldefehlermeldung an
AbstractUserDetailsAuthenticationProvider.badCredentials=Die Login-ID oder das Passwort ist falsch.
② Erstellung des Eingabeformulars (vor Änderung)
Zunächst habe ich das HTML des Eingabeformulars wie unten gezeigt erstellt.
signup.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/template}">
<head>
<meta charset="UTF-8"></meta>
<title>SignUp</title>
</head>
<!--Benutzerregistrierungsbildschirm-->
<body>
<div layout:fragment="content">
<div class="col-sm-4 offset-sm-4">
<div class="page-header">
<h1>Benutzerregistrierungsbildschirm</h1>
</div>
<form method="post" th:action="@{/signupUser}" th:object="${signupForm}">
<table class="table table-bordered table-hover">
<tr>
<td> <!--Wenn im Feld "userId" des Modellobjekts "signupForm" ein Fehler auftritt, wird im Klassenattribut "has" angezeigt-Fügen Sie "Fehler" hinzu und machen Sie den Bereich um das Textfeld rot
-->
<div class="form-group" th:classappend="${#fields.hasErrors('userId')}?'has-error'">
<input type="text" class="form-control" placeholder="Anmelde-ID" th:field="*{userId}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}">
userId error
</span>
</div>
</td>
<tr>
<tr>
<td> <!--Wenn im Feld "mailAddress" des Modellobjekts "signupForm" ein Fehler auftritt, hat das Klassenattribut "has"-Fügen Sie "Fehler" hinzu und machen Sie den Bereich um das Textfeld rot
-->
<div class="form-group"
th:classappend="${#fields.hasErrors('mailAddress')}?'has-error'">
<input type="text" class="form-control" placeholder="Mail Adresse" th:field="*{mailAddress}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('mailAddress')}"
th:errors="*{mailAddress}">
mailAddress error
</span>
</div>
</td>
<tr>
<tr>
<td> <!--Wenn im Feld "password" des Modellobjekts "signupForm" ein Fehler auftritt, wird im Klassenattribut "has" angezeigt-Fügen Sie "Fehler" hinzu und machen Sie den Bereich um das Textfeld rot
-->
<div class="form-group"
th:classappend="${#fields.hasErrors('password')}?'has-errors'">
<input type="text" class="form-control" placeholder="Passwort" th:field="*{password}"/>
<span class="text-danger"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">
password error
</span>
</div>
</td>
<tr>
</table>
<button class="btn btn-primary col-sm-6" type="submit">Anmelden</button>
</form>
</div>
</div>
</body>
</html>
Wie im Kommentar in HTML beschrieben, schrieb ich, als in jedem Feld ein Fehler auftrat, dass der Rahmen des Textfelds rot wurde, aber das Ergebnis war, dass der Rahmen nicht rot wurde, wie unten gezeigt.
Übrigens ist "has-error" eine Bootstrap-Klasse, die den Textfeldrahmen rot macht.
Als ich das "Bootstrap 4-Migrationshandbuch" überprüfte, gab es die folgende Beschreibung.
** [Änderungen von Bootstrap 3.x] Ändern Sie den Anzeigestil jedes Überprüfungsstatus mithilfe der HTML5-Formularüberprüfungsfunktion in den Stil .has-Warnung, .has-Fehler, .has-Erfolg, .has-Feedback, .form-Control-Feedback sind veraltet Als Fallback können für die serverseitige Validierung .is-ungültige und .is-gültige Klassen anstelle von Pseudoklassen verwendet werden. .was-validiert Keine übergeordnete Klasse erforderlich. ** ** **
URL：https://bootstrap-guide.com/components/forms?
Seit Bootstrap 4 wurde "has-error" abgeschafft und "is-invalid" scheint stattdessen als Funktion bereitgestellt zu werden.
③ Ändern Sie das Eingabeformular
Schreiben Sie in das Eingabe-Tag, nicht in das div-Tag.
signup.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/template}">
<head>
<meta charset="UTF-8"></meta>
<title>SignUp</title>
</head>
<!--Benutzerregistrierungsbildschirm-->
<body>
<div layout:fragment="content">
<div class="col-sm-4 offset-sm-4">
<div class="page-header">
<h1>Benutzerregistrierungsbildschirm</h1>
</div>
<form method="post" th:action="@{/signupUser}" th:object="${signupForm}">
<table class="table table-bordered table-hover">
<tr>
<td>
<div class="form-group">
<!--Wenn im Feld "userId" des Modellobjekts "signupForm" ein Fehler auftritt, fügen Sie das Klassenattribut hinzu und "is"-Rot um das Textfeld mit "ungültig"-->
<input type="text" class="form-control" placeholder="Anmelde-ID" th:field="*{userId}"
th:classappend="${#fields.hasErrors('userId')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('userId')}"
th:errors="*{userId}">
userId error
</span>
</div>
</td>
<tr>
<tr>
<td>
<div class="form-group">
<!--Wenn im Feld "mailAddress" des Modellobjekts "signupForm" ein Fehler auftritt, fügen Sie das Klassenattribut hinzu und "is"-Rot um das Textfeld mit "ungültig"-->
<input type="text" class="form-control" placeholder="Mail Adresse" th:field="*{mailAddress}"
th:classappend="${#fields.hasErrors('mailAddress')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('mailAddress')}"
th:errors="*{mailAddress}">
mailAddress error
</span>
</div>
</td>
<tr>
<tr>
<td>
<div class="form-group">
<!--Wenn im Feld "password" des Modellobjekts "signupForm" ein Fehler auftritt, fügen Sie das Klassenattribut hinzu und "is".-Rot um das Textfeld mit "ungültig"-->
<input type="text" class="form-control" placeholder="Passwort" th:field="*{password}"
th:classappend="${#fields.hasErrors('password')}?'is-invalid'"/>
<span class="text-danger"
th:if="${#fields.hasErrors('password')}"
th:errors="*{password}">
password error
</span>
</div>
</td>
<tr>
</table>
<button class="btn btn-primary col-sm-6" type="submit">Anmelden</button>
</form>
</div>
</div>
</body>
</html>
Als ich es ausführte, konnte ich den Rahmen des Textfelds rot machen, wenn ein Eingabefehler auftrat, wie unten gezeigt.
Referenz: https://www.e-pokke.com/blog/bootstrap4-invalid-feedback.html https://learning-collection.com/thymeleaf%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9/
Recommended Posts