Formularvalidierung in AngularJS
Bevor Sie sich mit diesem Artikel vertraut machen, müssen Sie zunächst das Konzept des Formular-Tags in HTML und den Mechanismus zum Senden von Daten an die Serverschicht verstehen. Wenn nicht, gehen Sie zurück zum HTML-Formularartikel , um mehr zu erfahren.
Bei HTML-Formularen wissen wir, dass das Formular vor dem Absenden der Daten validiert werden muss, um sicherzustellen, dass die vom Benutzer eingegebenen Daten das richtige Format haben, bevor sie an den Server gesendet werden. AngularJS bietet uns auch einen Mechanismus zur Validierung des Formulars.
Mục lục
Dienstvalidierung in angleJS
Dokumente:https://docs.angularjs.org/guide/forms
In Anbetracht des ersten Beispiels haben wir ein Registrierungsformular mit den folgenden Feldern:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Validate</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <style> input{ margin-bottom: 15px; } </style> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <form name="myForm" ng-submit="submit()"> <input type="text" ng-model="name" name="name" placeholder="Enter your name" required /> <span>{{myForm.name.$valid}}</span> <br/> <input type="email" ng-model="email" name="email" placeholder="Enter your email" required /> <span>{{myForm.email.$valid}}</span> <br/> <input type="password" ng-model="password" name="password" placeholder="Enter your password" required /> <span>{{myForm.password.$valid}}</span> <br/> <input type="password" ng-model="confirmpassword" name="confirmpassword" placeholder="Confirm your password" required /> <span>{{myForm.confirmpassword.$valid}}</span> <br/> <button>Register</button> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = ""; $scope.email = ""; $scope.password = ""; $scope.confirmpassword = ""; $scope.submit = function() { console.log($scope.myForm); } }); </script> </html> 
Nachdem wir den Browser ausgeführt und die Daten eingegeben haben, sehen wir standardmäßig den Wert {{myForm.$valid}} ,… gleich false (was bedeutet, dass das Formular nicht validiert wurde) oder {{ myForm.name. $valid}} wird auch sofort nach Eingabe eines gültigen Werts aktualisiert, das Modell wechselt sofort auf true. Wir verstehen also, dass dieser $valid -Dienst verwendet wird, um den Validierungsstatus des Formulars zu überprüfen, und der Validierungsstatus jeder Eingabe lautet wie folgt:
Formularzustände (Formularzustände)
Die folgenden Servicevariablen stellen den Zustand der Eingabe im Formular dar:
- $pristine – pristine – unveränderte Form
- $dirty – Formular wurde bearbeitet
- $invalid – Formularinhalt ist ungültig
- $valid – Formularinhalt ist gültig
- $submitted – Formular wurde übermittelt
Statusstream:
- pristine & invalid (primitives Feld, noch nicht gültig)
- Dirty & Invalid (Feld wurde bearbeitet, ist aber nicht gültig)
- schmutzig & gültig (Feld bearbeitet und gültig)
Eingangszustände
- $untouched – unberührtes Eingabefeld
- $touch – Eingabefeld berühren
- $pristine – primitiv – unverändertes Eingabefeld
- $dirty – unbearbeitetes Eingabefeld
- $invalid – Ungültiges Eingabefeld
- $valid – gültiges Eingabefeld
Diese Zustände werden verwendet, um den Eingabezustand des Benutzers zu bestimmen, es ist vollständig möglich, sich auf den Wahr/Falsch-Wert dieser Dienstzustände zu verlassen, um ungültige oder gültige Nachrichten an den Benutzer zurückzugeben.
CSS-Klassen
AngularJS bietet eine Liste integrierter CSS-Klassen, die es Programmierern ermöglichen, Eingabefelder basierend auf dem Status des Formulars oder der Eingabe zu gestalten:
- ng-gültig
- ng-ungültig
- ng-unberührt
- ng-schmutzig
- ng-berührt
- ng-unberührt
- ng-eingereicht
Wir können uns darauf verlassen, dass sie CSS für Formulare verwenden, um die Benutzererfahrung zu verbessern.
Beispielformularvalidierung in einem Registrierungsformular mit angleJS:
Schritt 1: Initialisieren Sie die Datei index.html mit der folgenden Struktur:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example validate form and submit</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Examole Routes AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://code.angularjs.org/1.8.2/angular-route.min.js"></script> <style> .container { max-width: 400px; margin: 0 auto; padding: 15px; align-items: center; } .flex-wrap { display: flex; flex-wrap: wrap; } .list-none { list-style: none; } .menu-list { padding: 0px; margin: 0px; justify-content: flex-end; } .menu-list li { margin: 0px 5px; } .menu-list li a { text-decoration: none; color: #000; } .menu-list li a:hover { color: #46b8e6; } .no-margin { margin: 0; } .main-header { display: flex; background: #f5f5f5; } .logo-wrap { width: 45px; } .main-header nav { width: calc(100% - 46px); } .main-footer { background: #fa726c; } .white { color: #fff; } .blue { color: #46b8e6; } .form-wrap{ margin-top: 15px; } .form-wrap > *{ display: block; width: 100%; margin-bottom: 5px; } .form-wrap > input{ border: 1px solid #e1e1e1; height: 36px; line-height: 36px; padding: 5px; box-sizing: border-box; } .form-wrap > input:focus{ outline: none; } .w100{ width: 100%; } .button{ background: #ffc856; color: #fff; transition: all 0.3s; border: none; height: 40px; line-height: 40px; cursor: pointer; } .button:hover{ background: #47b7e5; color: #fff; } label{ font-weight: bold; } .error{ color: red; } input.ng-invalid{ border: 1px solid red; } input.ng-valid{ border: 1px solid green; } </style> </head> <body ng-app="myApp"> <div ng-controller="headerController" ng-class="[gc.container, gc.mainheader ,gc.flexwrap]"> <div ng-class="gc.logowrap"> <h2 ng-class="[gc.nomargin, gc.blue]">{{logotext}}</h2> </div> <nav> <ul ng-class="[gc.flexwrap , gc.listnone, gc.menulist]"> <li><a ng-href="#!">Home</a></li> <li><a ng-href="#!about">About</a></li> <li><a ng-href="#!contact">Contact</a></li> </ul> </nav> </div> <div ng-controller="mainController" ng-class="[gc.container, gc.mainbox, gc.flexwrap]"> <div ng-class="gc.w100" ng-view></div> </div> <div ng-controller="footerController" ng-class="[gc.container,gc.flexwrap,gc.mainfooter,gc.white]"> {{copyRight}} </div> </body> <script> var app = angular.module('myApp', ['ngRoute']); app.config(function ($routeProvider) { $routeProvider. when('/', { templateUrl: 'templates/register.html' }) .when('/about', { template: '<div><h2>{{aboutdata.title}}</h2><p>{{aboutdata.description}}</p></div>' }) .when('/contact', { template: "<div><h2>{{contactdata.title}}</h2><p>{{contactdata.description}}</p></div>" }); }); app.run(function ($rootScope) { // global class variable $rootScope.gc = { container: 'container', mainheader: 'main-header', mainfooter: 'main-footer', flexwrap: 'flex-wrap', listnone: 'list-none', menulist: 'menu-list', nomargin: 'no-margin', white: 'white', logowrap: 'logo-wrap', blue: 'blue', formwrap: 'form-wrap', w100: 'w100', button: 'button', error: 'error' }; }); app.filter('validmessage', function () { return function (input) { if (input == true) { return 'All data validated'; } else { return 'Please enter valid data'; } } }); app.controller('headerController', function ($scope, $location) { $scope.navigation = [ { name: 'Home', url: '/', controller: 'mainController' }, { name: 'About', url: '/about', controller: 'mainController' }, { name: 'Contact', url: '/contact', controller: 'mainController' } ]; $scope.logotext = 'web888.vn'; }); app.controller('mainController', function ($scope, $location,$rootScope) { $scope.homedata = { title: 'Home', description: 'This is home page' }; $scope.aboutdata = { title: 'About', description: 'This is about page' }; $scope.contactdata = { title: 'Contact', description: 'This is contact page' }; $scope.submit = function() { console.log(this.registerForm); alert('submited'); }; }); app.controller('footerController', function ($scope) { $scope.copyRight = '@copyright web888.vn'; }); </script> </html> </body> </html>Schritt 2: Initialisieren Sie die Datei register.html im Vorlagenordner (der Vorlagenordner befindet sich auf der gleichen Ebene wie die Dateistruktur index.html):
<form name="registerForm" ng-class="gc.w100" ng-submit="submit()"> <h2 ng-class="gc.nomargin">Register Account</h2> <div ng-class="gc.formwrap"> <label>Username</label> <input type="text" ng-model="username" placeholder="username" ng-class="gc.input" required minlength="5"/> <label>Password</label> <input type="password" ng-model="password" placeholder="password" ng-class="gc.input" required minlength="5" /> <label>Confirm Password</label> <input type="password" ng-model="confirmpassword" placeholder="confirmpassword" ng-class="gc.input" required minlength="5" /> <button ng-class="gc.button">Register</button> <label>{{registerForm.$valid | validmessage}}</label> </div> </form>Schnittstelle nach dem Ausführen der Anwendung:
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
