Validácia formy pomocou AngularJS a Spring MVC

1. Prehľad

Overenie nie je nikdy také jednoduché, ako očakávame. A samozrejme potvrdenie hodnôt zadaných používateľom do aplikácie je veľmi dôležité pre zachovanie integrity našich údajov.

V kontexte webovej aplikácie sa zadávanie údajov zvyčajne vykonáva pomocou formulárov HTML a vyžaduje validáciu na strane klienta aj na strane servera.

V tejto príručke sa pozrieme na implementácia validácie vstupu formulára na strane klienta pomocou AngularJS a validácia na strane servera pomocou rámca Spring MVC.

Tento článok sa zameriava na jarné MVC. Náš článok Validácia v Spring Boot popisuje, ako vykonávať validácie v Spring Boot.

2. Maven závislosti

Na začiatok pridajme nasledujúce závislosti:

 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 

Najnovšie verzie programov jar-webmvc, hibernate-validator a jackson-databind si môžete stiahnuť z Maven Central.

3. Validácia pomocou pružiny MVC

Aplikácia by sa nikdy nemala spoliehať iba na validáciu na strane klienta, pretože je možné ju ľahko obísť. Aby ste zabránili ukladaniu nesprávnych alebo škodlivých hodnôt alebo spôsobili nesprávne vykonávanie logiky aplikácie, je dôležité overiť vstupné hodnoty aj na strane servera.

Jarná MVC ponúka podporu pre validáciu na strane servera pomocou Overenie fazule JSR 349 anotácie špecifikácie. V tomto príklade použijeme referenčnú implementáciu špecifikácie, ktorá je hibernácia-validátor.

3.1. Dátový model

Vytvorme a Používateľ trieda, ktorá má vlastnosti anotované príslušnými anotáciami validácie:

verejná trieda Používateľ {@NotNull @Email private String email; @NotNull @Size (min = 4, max = 15) súkromné ​​reťazcové heslo; @NotBlank súkromné ​​meno reťazca; @ Min (18) @ Číslice (celé číslo = 2, zlomok = 0) súkromný vek; // štandardný konštruktor, getre, setre}

Použité anotácie patria k JSR 349 špecifikácia, s výnimkou @Email a @NotBlank, ktoré sú špecifické pre hibernácia-validátor knižnica.

3.2. Pružinový radič MVC

Vytvorme triedu radiča, ktorá definuje a / užívateľ koncový bod, ktorý sa použije na uloženie nového Používateľ namietať voči a Zoznam.

S cieľom umožniť validáciu Používateľ objektu prijatému prostredníctvom parametrov požiadavky, pred deklaráciou musí byť znak @ Platné anotácia a chyby overenia sa budú nachádzať v a BindingResult inštancia.

Na zistenie, či objekt obsahuje neplatné hodnoty, môžeme použiť znak hasErrors () metóda BindingResult.

Ak hasErrors () vracia pravda, môžeme vrátiť a Pole JSON obsahujúce chybové správy spojené s validáciami, ktoré neprešli. V opačnom prípade pridáme objekt do zoznamu:

@PostMapping (value = "/ user") @ResponseBody public ResponseEntity saveUser (používateľ @Valid, výsledok BindingResult, model modelu) {if (result.hasErrors ()) {List errors = result.getAllErrors (). Stream (). mapa (DefaultMessageSourceResolvable :: getDefaultMessage) .collect (Collectors.toList ()); vrátiť novú ResponseEntity (chyby, HttpStatus.OK); } else {if (users.stream (). anyMatch (it -> user.getEmail (). equals (it.getEmail ()))) {return new ResponseEntity (Collections.singletonList ("Email already already!"), HttpStatus .KONFLIKT); } else {users.add (user); vrátiť novú ResponseEntity (HttpStatus.CREATED); }}}

Ako môžeš vidieť, overenie na strane servera pridáva výhodu schopnosti vykonávať ďalšie kontroly, ktoré na strane klienta nie sú možné.

V našom prípade môžeme overiť, či používateľ s rovnakým e-mailom už existuje - a v takom prípade vrátiť stav 409 KONFLIKTU.

Musíme tiež definovať náš zoznam používateľov a inicializovať ho niekoľkými hodnotami:

private List users = Arrays.asList (new User ("[email protected]", "pass", "Ana", 20), new User ("[email protected]", "pass", "Bob", 30), nový používateľ („[chránený e-mailom]“, „pass“, „John“, 40), nový používateľ („[chránený e-mailom]“, „pass“, „Mary“, 30));

Pridajme tiež mapovanie na načítanie zoznamu používateľov ako objekt JSON:

@GetMapping (value = "/ users") @ResponseBody public List getUsers () {návrat používateľov; }

Poslednou položkou, ktorú v našom ovládači Spring MVC potrebujeme, je mapovanie, ktoré vráti hlavnú stránku našej aplikácie:

@GetMapping ("/ userPage") public String getUserProfilePage () {return "user"; }

Pozrime sa na pouzivatel.html stránku podrobnejšie v sekcii AngularJS.

3.3. Jarná konfigurácia MVC

Pridajme do našej aplikácie základnú konfiguráciu MVC:

@Configuration @EnableWebMvc @ComponentScan (basePackages = "com.baeldung.springmvcforms") trieda ApplicationConfiguration implementuje WebMvcConfigurer {@Override public void configureDefaultServletHandling (DefaultServletHandlerConfigurer konfigurátor) {) konfigurátor.enable } @Bean public InternalResourceViewResolver htmlViewResolver () {InternalResourceViewResolver bean = nový InternalResourceViewResolver (); bean.setPrefix ("/ WEB-INF / html /"); bean.setSuffix (". html"); spätná fazuľa; }}

3.4. Inicializácia aplikácie

Vytvorme triedu, ktorá sa implementuje WebApplicationInitializer rozhranie pre spustenie našej aplikácie:

public class WebInitializer implementuje WebApplicationInitializer {public void onStartup (ServletContext container) hodí ServletException {AnnotationConfigWebApplicationContext ctx = new AnnotationConfigWebApplicationContext (); ctx.register (ApplicationConfiguration.class); ctx.setServletContext (kontajner); container.addListener (nový ContextLoaderListener (ctx)); ServletRegistration.Dynamic servlet = container.addServlet ("dispečer", nový DispatcherServlet (ctx)); servlet.setLoadOnStartup (1); servlet.addMapping ("/"); }}

3.5. Testovanie overenia pružiny MVC pomocou zvlnenia

Pred implementáciou klientskej sekcie AngularJS môžeme naše API otestovať pomocou cURL pomocou príkazu:

curl -i -X ​​POST -H "Prijať: application / json" "localhost: 8080 / spring-mvc-forms / user? email = aaa & heslo = 12 & vek = 12"

Odozvou je pole obsahujúce predvolené chybové správy:

["nie je správne vytvorená e-mailová adresa", "veľkosť musí byť medzi 4 a 15", "nesmie byť prázdna", "musí byť väčšia alebo rovná 18"]

4. Validácia AngularJS

Overenie na strane klienta je užitočné pri vytváraní lepšej používateľskej skúsenosti, pretože poskytuje používateľovi informácie o tom, ako úspešne odoslať platné údaje, a umožňuje mu pokračovať v interakcii s aplikáciou.

Knižnica AngularJS má veľkú podporu pre pridávanie požiadaviek na overovanie do polí formulárov, spracovanie chybových správ a úpravu štýlov platných a neplatných formulárov.

Najskôr vytvorme modul AngularJS, ktorý vstrekuje ngMessages modul, ktorý sa používa na overovacie správy:

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

Ďalej vytvoríme službu a radič AngularJS, ktorý bude využívať API postavené v predchádzajúcej časti.

4.1. Služba AngularJS

Naša služba bude mať dve metódy, ktoré volajú metódy radiča MVC - jednu na uloženie používateľa a jednu na načítanie zoznamu používateľov:

app.service ('UserService', ['$ http', function ($ http) {this.saveUser = function saveUser (user) {return $ http ({method: 'POST', url: 'user', params: { email: user.email, heslo: user.password, meno: user.name, vek: user.age}, hlavičky: 'Accept: application / json'});} this.getUsers = funkcia getUsers () {návrat $ http ({method: 'GET', url: 'users', headers: 'Accept: application / json'}). then (function (response) {return response.data;});}}]));

4.2. Ovládač AngularJS

The UserCtrl radič vstrekuje UserService, zavolá metódy služby a spracuje odpovede a chybové správy:

app.controller ('UserCtrl', ['$ scope', 'UserService', function ($ scope, UserService) {$ scope.submit = false; $ scope.getUsers = function () {UserService.getUsers (). then ( function (data) {$ scope.users = data;});} $ scope.saveUser = function () {$ scope.submitted = true; if ($ scope.userForm. $ valid) {UserService.saveUser ($ scope. user) .then (function success (response) {$ scope.message = 'User added!'; $ scope.errorMessage = ''; $ scope.getUsers (); $ scope.user = null; $ scope.submitted = false ;}, chyba funkcie (odpoveď) {if (response.status == 409) {$ scope.errorMessage = response.data.message;} else {$ scope.errorMessage = 'Chyba pri pridávaní používateľa!';} $ scope.message = '';});}} $ scope.getUsers ();}]);

Na príklade vyššie vidíme, že metóda služby sa volá, iba ak $ platné majetok userForm je pravda. V tomto prípade stále existuje dodatočná kontrola duplicitných e-mailov, ktorú je možné vykonať iba na serveri a v priečinku chyba() funkcie.

Všimnite si tiež, že existuje predložené definovaná premenná, ktorá nám oznámi, či bol formulár odoslaný alebo nie.

Táto premenná bude spočiatku nepravdivé, a o vyvolaní saveUser () metóda sa stáva pravda. Pokiaľ nechceme, aby sa validačné správy zobrazovali skôr, ako užívateľ odošle formulár, môžeme použiť predložené tomu zabrániť.

4.3. Formulár využívajúci validáciu AngularJS

Aby sme mohli využívať knižnicu AngularJS a náš modul AngularJS, budeme musieť pridať skripty do našej pouzivatel.html stránka:

Potom môžeme použiť náš modul a kontrolér nastavením ng-app a ng-radič vlastnosti:

Vytvorme náš formulár HTML:

 ... 

Upozorňujeme, že musíme nastaviť novalidát atribút vo formulári, aby sa zabránilo predvolenej validácii HTML5 a nahradila sa našou vlastnou.

The trieda ng atribút pridáva chyba formulára Triedy CSS dynamicky do formulára, ak predložené premenná má hodnotu pravda.

The ng-predložiť Atribút definuje funkciu radiča AngularJS, ktorá sa bude volať pri odoslaní formulára. Použitím ng-predložiť namiesto ng-klik má výhodu v tom, že reaguje aj na odoslanie formulára pomocou klávesu ENTER.

Teraz pridajme štyri vstupné polia pre atribúty User:

E-mail: Heslo: Meno: Vek: 

Každé vstupné pole má väzbu na vlastnosť používateľ premenná cez ng-model atribút.

Pre nastavenie overovacích pravidiel, používame HTML5 požadovaný atribút a niekoľko špecifických atribútov AngularJS: ng-dĺžka reťazca, ng-maximálna dĺžka, ng-min, a ng-trim.

Pre e-mail pole, používame tiež typu atribút s hodnotou e-mail na overenie e-mailu na strane klienta.

S cieľom pridať chybové správy zodpovedajúce každému poľu, AngularJS ponúka ng-správy direktíva, ktorá prechádza slučkou cez vstup $ chyby objekt a zobrazuje správy na základe každého overovacieho pravidla.

Pridajme smernicu pre e-mail pole hneď za definíciou vstupu:

Neplatný email!

E-mail je povinný!

Podobné chybové správy možno pridať pre ďalšie vstupné polia.

Môžeme určiť, kedy sa smernica zobrazí pre e-mail pole pomocou ng-show vlastnosť s boolovským výrazom. V našom príklade zobrazujeme smernicu, keď má pole neplatnú hodnotu, čo znamená $ neplatné majetok je pravdaa predložené premenná je tiež pravda.

Pre pole sa zobrazí naraz iba jedna chybová správa.

Za vstupné pole môžeme pridať aj znak začiarknutia (predstavovaný znakom HEX kódu ✓) v prípade, že je pole platné, v závislosti na $ platné nehnuteľnosť:

AngularJS validácia tiež ponúka podporu pre styling pomocou CSS tried ako napr ng-platné a ng-neplatné alebo konkrétnejšie ako ng-invalid-required a ng-invalid-minlength.

Pridajme vlastnosť CSS farba okraja: červená za neplatné vstupy vo vnútri formulára chyba formulára trieda:

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

Chybové správy môžeme tiež zobraziť červenou farbou pomocou triedy CSS:

.error-messages {color: red; }

Po zostavení všetkého si ukážeme príklad toho, ako bude vyzerať naše overenie formulára na strane klienta, keď bude vyplnený kombináciou platných a neplatných hodnôt:

5. Záver

V tomto tutoriáli sme si ukázali, ako môžeme kombinovať validáciu na strane klienta a servera pomocou AngularJS a Spring MVC.

Celý zdrojový kód príkladov nájdete ako vždy na serveri GitHub.

Ak chcete aplikáciu zobraziť, prejdite na ikonu / userPage URL po jeho spustení.