streamalism.org

1. Oversikt

Validering er aldri så grei som vi forventer. Og selvfølgelig er det veldig viktig å validere verdiene som er angitt av en bruker i et program for å bevare integriteten til dataene våre.

I sammenheng med et webapplikasjon blir datainndata vanligvis gjort ved hjelp av HTML-skjemaer og krever både klientside og server-side validering.

I denne veiledningen tar vi en titt på implementering av klientside-validering av skjemainput ved bruk av AngularJS og server-validering ved bruk av Spring MVC-rammeverket.

Denne artikkelen fokuserer på Spring MVC. Vår artikkel Validering i Spring Boot beskriver hvordan du gjør valideringer i Spring Boot.

2. Maven-avhengigheter

For å starte, la oss legge til følgende avhengigheter:

 org.springframework spring-webmvc 4.3.7.RELEASE org.hibernate hibernate-validator 5.4.0.Final com.fasterxml.jackson.core jackson-databind 2.8.7 

De siste versjonene av vår-webmvc, dvalemodus og jackson-databind kan lastes ned fra Maven Central.

3. Validering ved bruk av vår-MVC

En søknad bør aldri stole utelukkende på validering på klientsiden, da dette lett kan omgås. For å forhindre at uriktige eller ondsinnede verdier blir lagret eller forårsaker feil utførelse av applikasjonslogikken, er det viktig å validere inngangsverdier også på serversiden.

Spring MVC tilbyr støtte for validering på serversiden ved hjelp av JSR 349 ​​Validering av bønner spesifikasjonsmerknader. For dette eksemplet vil vi bruke referanseimplementeringen av spesifikasjonen, som er dvalemodus.

3.1. Datamodellen

La oss lage en Bruker klasse som har egenskaper som er merket med passende valideringskommentarer:

offentlig klasse bruker {@NotNull @Email privat streng-e-post; @NotNull @Size (min = 4, max = 15) privat strengpassord; @NotBlank private strengnavn; @Min (18) @Digits (heltall = 2, brøkdel = 0) privat alder; // standard konstruktør, getters, setters}

Merknadene som er brukt ovenfor tilhører JSR 349 spesifikasjon, med unntak av @Email og @NotBlank, som er spesifikke for dvalemodus bibliotek.

3.2. Vår MVC-kontroller

La oss lage en kontrollerklasse som definerer en /bruker endepunkt, som vil bli brukt til å lagre et nytt Bruker motsette seg en Liste.

For å muliggjøre validering av Bruker objekt mottatt gjennom forespørselsparametere, må erklæringen være foran @Gyldig kommentar, og valideringsfeilene blir holdt i et Bindende resultat forekomst.

For å avgjøre om objektet inneholder ugyldige verdier, kan vi bruke hasErrors () Metode av Bindende resultat.

Hvis hasErrors () returnerer ekte, kan vi returnere a JSON-array inneholder feilmeldingene knyttet til valideringene som ikke passerte. Ellers vil vi legge til objektet i listen:

@PostMapping (value = "/ user") @ResponseBody public ResponseEntity saveUser (@Valid User user, BindingResult result, Model model) {if (result.hasErrors ()) {List errors = result.getAllErrors (). Stream (). kart (DefaultMessageSourceResolvable :: getDefaultMessage) .collect (Collectors.toList ()); returner ny ResponseEntity (feil, HttpStatus.OK); } annet {if (users.stream (). anyMatch (it -> user.getEmail (). tilsvarer (it.getEmail ()))) {returner nye ResponseEntity (Collections.singletonList ("E-post eksisterer allerede!"), HttpStatus .KONFLIKT); } annet {users.add (bruker); returner ny ResponseEntity (HttpStatus.CREATED); }}}

Som du kan se, validering på serversiden legger til fordelen med å ha muligheten til å utføre ytterligere kontroller som ikke er mulig på klientsiden.

I vårt tilfelle kan vi bekrefte om en bruker med samme e-post allerede eksisterer - og returnere statusen 409 KONFLIKT hvis det er tilfelle.

Vi må også definere listen over brukere og initialisere den med noen få verdier:

private List brukere = Arrays.asList (ny bruker ("[e-postbeskyttet]", "pass", "Ana", 20), ny bruker ("[e-postbeskyttet]", "pass", "Bob", 30), ny bruker ("[email protected]", "pass", "John", 40), new User ("[email protected]", "pass", "Mary", 30));

La oss også legge til en kartlegging for å hente listen over brukere som et JSON-objekt:

@GetMapping (value = "/ brukere") @ResponseBody offentlig Liste getUsers () {returnere brukere; }

Det siste elementet vi trenger i vår MVC-kontroller er en kartlegging for å returnere hovedsiden til søknaden vår:

@GetMapping ("/ userPage") offentlig streng getUserProfilePage () {returner "bruker"; }

Vi tar en titt på bruker.html siden mer detaljert i AngularJS-delen.

3.3. Vår MVC-konfigurasjon

La oss legge til en grunnleggende MVC-konfigurasjon i applikasjonen vår:

@Configuration @EnableWebMvc @ComponentScan (basePackages = "com.baeldung.springmvcforms") klasse ApplicationConfiguration implementerer WebMvcConfigurer {@ Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer configurer) (konfigurerbar) {konfigurer; } @Bean offentlig InternalResourceViewResolver htmlViewResolver () {InternalResourceViewResolver bean = ny InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / html /"); bean.setSuffix (". html"); retur bønne; }}

3.4. Initialiserer applikasjonen

La oss lage en klasse som implementeres WebApplicationInitializer grensesnitt for å kjøre applikasjonen vår:

offentlig klasse WebInitializer implementerer WebApplicationInitializer {public void onStartup (ServletContext container) kaster ServletException {AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext (); ctx.register (ApplicationConfiguration.class); ctx.setServletContext (container); container.addListener (ny ContextLoaderListener (ctx)); ServletRegistration.Dynamic servlet = container.addServlet ("dispatcher", new DispatcherServlet (ctx)); servlet.setLoadOnStartup (1); servlet.addMapping ("/"); }}

3.5. Testing av våren Mvc-validering ved hjelp av krølling

Før vi implementerer AngularJS-klientseksjonen, kan vi teste API-en vår ved hjelp av cURL med kommandoen:

curl -i -X ​​POST -H "Godta: applikasjon / json" "localhost: 8080 / spring-mvc-forms / user? email = aaa & password = 12 & age = 12"

Svaret er en matrise som inneholder standard feilmeldinger:

["ikke en velformet e-postadresse", "størrelsen må være mellom 4 og 15", "må ikke være tom", "må være større enn eller lik 18"]

4. AngularJS-validering

Validering av klientsiden er nyttig for å skape en bedre brukeropplevelse, ettersom den gir brukeren informasjon om hvordan man kan sende gyldige data og gjør det mulig for dem å kunne fortsette å samhandle med applikasjonen.

AngularJS-biblioteket har god støtte for å legge til valideringskrav på skjemafelt, håndtering av feilmeldinger og styling av gyldige og ugyldige skjemaer.

La oss først lage en AngularJS-modul som injiserer ngMeldinger modul, som brukes til valideringsmeldinger:

var app = angular.module ('app', ['ngMessages']);

La oss deretter opprette en AngularJS-tjeneste og kontroller som vil konsumere API-en bygget i forrige seksjon.

4.1. AngularJS-tjenesten

Tjenesten vår vil ha to metoder som kaller MVC-kontrollermetodene - en for å lagre en bruker, og en for å hente listen over brukere:

app.service ('UserService', ['$ http', function ($ http) {this.saveUser = function saveUser (user) {return $ http ({method: 'POST', url: 'user', params: {) e-post: user.email, passord: user.password, navn: user.name, alder: user.age}, overskrifter: 'Godta: application / json'});} this.getUsers = funksjon getUsers () {return $ http ({metode: 'GET', url: 'brukere', overskrifter: 'Godta: application / json'}). deretter (funksjon (respons) {return response.data;});}}]);

4.2. AngularJS-kontrolleren

De UserCtrl kontrolleren injiserer UserService, kaller servicemetodene og håndterer svar og feilmeldinger:

app.controller ('UserCtrl', ['$ scope', 'UserService', function ($ scope, UserService) {$ scope.subitted = false; $ scope.getUsers = function () {UserService.getUsers (). deretter ( funksjon (data) {$ scope.users = data;});} $ scope.saveUser = funksjon () {$ scope.subitted = true; hvis ($ scope.userForm. $ gyldig) {UserService.saveUser ($ scope. bruker) .then (funksjon suksess (respons) {$ scope.message = 'Bruker lagt til!'; $ scope.errorMessage = ''; $ scope.getUsers (); $ scope.user = null; $ scope.subitted = false ;}, funksjonsfeil (respons) {if (respons.status == 409) {$ scope.errorMessage = respons.data.message;} ellers {$ scope.errorMessage = 'Feil ved legging av bruker!';} $ scope.message = '';});}} $ scope.getUsers ();}]);

Vi kan se i eksemplet ovenfor at servicemetoden bare kalles hvis $ gyldig tilhører userForm er sant. I dette tilfellet er det fortsatt sjekken for dupliserte e-postmeldinger, som bare kan gjøres på serveren og håndteres separat i feil() funksjon.

Legg også merke til at det er en sendt inn variabel definert som vil fortelle oss om skjemaet er sendt inn eller ikke.

I utgangspunktet vil denne variabelen være falsk, og ved påkallelse av lagre bruker () metode, blir det ekte. Hvis vi ikke vil at valideringsmeldinger skal vises før brukeren sender inn skjemaet, kan vi bruke sendt inn variabel for å forhindre dette.

4.3. Skjema ved bruk av AngularJS-validering

For å kunne bruke AngularJS-biblioteket og AngularJS-modulen, må vi legge til skriptene i bruker.html side:

Da kan vi bruke modulen og kontrolleren vår ved å stille inn ng-app og ng-kontroller eiendommer:

La oss lage vårt HTML-skjema:

 ... 

Merk at vi må stille inn forny attributtet på skjemaet for å forhindre standard HTML5-validering og erstatte det med vårt eget.

De ng-klasse attributt legger til skjema-feil CSS klasse dynamisk til skjemaet hvis sendt inn variabel har en verdi på ekte.

De ng-send inn attributt definerer AngularJS-kontrollerfunksjonen som blir ringt når skjemaet er sendt. Ved hjelp av ng-send inn i stedet for ng-klikk har fordelen at den også svarer på å sende inn skjemaet ved hjelp av ENTER-tasten.

La oss nå legge til de fire inntastingsfeltene for brukerattributtene:

E-postadresse: Passord: Navn: Alder: 

Hvert inndatafelt har en binding til en egenskap til bruker variabel gjennom ng-modell Egenskap.

For å sette valideringsregler, bruker vi HTML5 kreves attributt og flere AngularJS-spesifikke attributter: ng-minglength, ng-maxlength, ng-min, og ng-trim.

For e-post felt, bruker vi også type attributt med verdien e-post for validering av e-post på klientsiden.

For å legge til feilmeldinger som tilsvarer hvert felt, AngularJS tilbyr ng-meldinger direktivet, som går gjennom en inngangs $ feil objekt og viser meldinger basert på hver valideringsregel.

La oss legge til direktivet for e-post felt rett etter inngangsdefinisjonen:

Ugyldig epost!
E-post er påkrevd!

Lignende feilmeldinger kan legges til for de andre inndatafeltene.

Vi kan kontrollere når direktivet vises for e-post feltet ved hjelp av ng-show eiendom med et boolsk uttrykk. I vårt eksempel viser vi direktivet når feltet har en ugyldig verdi, som betyr $ ugyldig eiendommen er ekte, og sendt inn variabel er også ekte.

Bare en feilmelding vises om gangen for et felt.

Vi kan også legge til et avkrysningsmerke (representert med HEX-kodetegn ✓) etter inndatafeltet i tilfelle feltet er gyldig, avhengig av $ gyldig eiendom:

 ✓ 

AngularJS-validering tilbyr også støtte for styling ved hjelp av CSS-klasser som ng-gyldig og ng-ugyldig eller mer spesifikke som ng-ugyldig-påkrevd og ng-ugyldig-minlengde.

La oss legge til CSS-egenskapen kantfarge: rød for ugyldige innganger i skjemaets skjema-feil klasse:

.form-error input.ng-ugyldig {border-color: red; }

Vi kan også vise feilmeldingene i rødt ved hjelp av en CSS-klasse:

.feilmeldinger {farge: rød; }

Etter å ha satt alt sammen, la oss se et eksempel på hvordan vår validering av klientsiden vil se ut når den er fylt ut med en blanding av gyldige og ugyldige verdier:

5. Konklusjon

I denne veiledningen har vi vist hvordan vi kan kombinere validering av klientsiden og serversiden ved hjelp av AngularJS og Spring MVC.

Som alltid kan hele kildekoden for eksemplene finnes på GitHub.

For å se programmet, gå til / userPage URL etter å ha kjørt den.