La convalida è un metodo per autenticare l'utente. È utilizzato in tutte le tecnologie Web come e . Ma oggi il nostro focus sarà sulla convalida in Angular JS nel seguente ordine:
- Cos'è la convalida del modulo?
- Validazione del modulo in Angular JS
- Passaggi nella convalida dei moduli
- Codice
Cos'è la convalida del modulo?
La convalida del modulo è una tecnica con cui possiamo convalidare il modulo HTML. Facciamo un semplice esempio per supporre che un utente abbia un modulo HTML e che il modulo HTML abbia campi diversi, questi campi vengono convalidati dal validatore del modulo quando vogliamo convalidare il modulo dobbiamo solo controllare il valore del campo particolare con l'espressione del validatore .
Se l'espressione regolare e il valore del campo sono gli stessi, possiamo dire che il nostro modulo è convalidato. Nel modulo HTML, ci sono diversi tipi di convalida come e-mail, obbligatorio, minimo, massimo, password, ecc.
Validazione del modulo in Angular JS
Parliamo di come possiamo convalidare un modulo in JS angolare. Angular JS fornisce vari tipi di proprietà di convalida del modulo che possiamo utilizzare per convalidare il modulo o ottenere i dati dal modulo.
$ valido : Questa proprietà indica se il campo è valido o meno applicando la regola appropriata su quello.
$ non valido : Poiché il nome dice non valido, questo riquadro non è valido o non è basato su una regola appropriata.
$ incontaminato : Restituirà true nel campo di input del modulo non utilizzato.
$ sporco : Restituirà true nel campo di input del modulo utilizzato.
$ toccato : Boolean True se l'input è stato sfocato.
Per accedere al modulo: .
Per accedere a un ingresso: ..
power bi vs tableau 2016
Ora spieghiamo la convalida del modulo in JS angolare con un esempio, quindi per prima cosa creiamo due file, uno è app.js e un altro è index.html. Il nostro file index.htm contiene un semplice modulo HTML che ha la convalida angolare e il nostro file app.js contiene il codice di backend per gestire la convalida del modulo sulla pagina index.html.
Ilindex.htmlmodulo contenuto pagina connovalidateproprietà e cosa significa esattamente?
La proprietà novalidate nel tag del form dice all'HTML che possiamo usare la nostra validazione del form personalizzata. Se non forniamo la proprietà novalidate, il modulo HTML viene convalidato utilizzando le proprietà di convalida del modulo predefinite HTML5.
Passaggi nella convalida dei moduli
Nel nostro modulo, abbiamo creato 6 campi nel nostro modulo che sono nome, cognome, e-mail, telefono, password e messaggio.
Per prima cosa, aggiungiamo il validatore di campo richiesto, questo validatore dice agli utenti che è richiesto un campo specifico.
Il prossimo è il campo email se un utente non fornisce alcuna email valida, il nostro validatore email genera un errore di convalida email.
Impostiamo la lunghezza minima e massima nella nostra convalida della password, la lunghezza minima è 5 e la lunghezza massima è 8 in modo che l'utente possa fornire una password valida compresa tra 5 e 8 caratteri.
Infine, impostiamo il telefono ei campi del messaggio obbligatori e, nello specifico, applichiamo la convalida del numero sul telefono archiviato.
Codice per la convalida del modulo in Angular JS
index.html
Esempio di ambito angolare First Name
Questo campo è obbligatorio
Cognome
Questo campo è obbligatorio
E-mail
Questo campo è obbligatorio
Non è un indirizzo email valido
Telefono
Questo campo è obbligatorio
Questo non è un telefono valido
Parola d'ordine
Questo campo è obbligatorio
Password compresa tra 5 e 8 caratteri
Messaggio
Questo campo è obbligatorio
Invia
app.js
var app = angular.module ('ngValidApp', []) app.controller ('ngValidController', function ($ scope) {})Parliamo di alcune direttive di convalida utilizzate nel modulo:
- ng-richiesto : Per fornire il campo richiesto
- ng-show : Per mostrare il messaggio di errore in base alla condizione (controllare le proprietà di convalida)
- di minlength : Per fornire una lunghezza minima
- ng-maxlength : Per fornire la massima lunghezza
- di-pattern : Per abbinare un modello specifico
- ng-model : Associa il campo con proprietà di convalida come $ error, $ valid, ecc.
Con questo, arriviamo alla fine di questo articolo di convalida in Angular JS. Spero che tu abbia capito le varie cose da considerare per la convalida del modulo in Angular JS.
Se desideri saperne di più sul framework Angular, dai un'occhiata al nostro che viene fornito con formazione dal vivo con istruttore e esperienza di progetto nella vita reale. Questa formazione ti aiuterà a comprendere in profondità Angular e ti aiuterà a raggiungere la padronanza sull'argomento.
Hai domande per noi? Per favore, menzionalo nella sezione commenti di questo articolo e ti risponderemo.