Επαλήθευση φόρμας AngularJS

Το AngularJS μπορεί να επαληθεύσει τα δεδομένα εισαγωγής.

Επαλήθευση φόρμας

Το AngularJS παρέχει πελάτη επαλήθευση φόρμας.

Το AngularJS παρακολουθεί την κατάσταση των φόρμας και πεδίων εισαγωγής (input, textarea, select) και επιτρέπει την ενημέρωση του χρήστη για την τρέχουσα κατάσταση.

Το AngularJS περιέχει πληροφορίες σχετικά με το αν έχουν καναληθεί ή τροποποιηθεί.

Μπορείτε να χρησιμοποιήσετε τα πρότυπα χαρακτηριστικά HTML5 για την επαλήθευση της εισαγωγής, ή να δημιουργήσετε την δική σας συνάρτηση επαλήθευσης.

Η πελάτη επαλήθευση δεν μπορεί να προστατεύσει μόνο την εισαγωγή του χρήστη. Η επαλήθευση στο server είναι απαραίτητη επίσης.

required

Χρήση των προπληρωμένων χαρακτηριστικών HTML5 required Η καθορισμένη εισαγωγή πρέπει να συμπληρωθεί:

παράδειγμα

Αυτό το πεδίο εισαγωγής είναι υποχρεωτικό:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Η έγκυρη κατάσταση της εισαγωγής είναι:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Προσπαθήστε να το δοκιμάσετε προσωπικά

email

Χρήση του τύπου HTML5 email Η καθορισμένη τιμή πρέπει να είναι email:

παράδειγμα

Αυτό το πεδίο εισαγωγής πρέπει να είναι email:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Η έγκυρη κατάσταση της εισαγωγής είναι:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Κατάσταση έγγραφου και κατάσταση πεδίου εισαγωγής

Το AngularJS ενημερώνει συνεχώς την κατάσταση του έγγραφου και των πεδίων εισαγωγής.

Τα πεδία εισαγωγής έχουν τις εξής καταστάσεις:

• $untouched Ο τομέας δεν έχει επαφές
• $touched Ο τομέας έχει επαφές
• $pristine Ο τομέας δεν έχει τροποποιηθεί
• $dirty Ο τομέας έχει τροποποιηθεί
• $invalid Το περιεχόμενο του τομέα είναι μη έγκυρο
• $valid Το περιεχόμενο του τομέα είναι έγκυρο

Είναι ιδιότητες των πεδίων εισαγωγής, μπορούν να είναι αληθής ή ψευδής.

Το έγγραφο έχει τις εξής καταστάσεις:

• $pristine Δεν έχει τροποποιηθεί κανένας τομέας
• $dirty ένας ή περισσότεροι τομείς έχουν τροποποιηθεί
• $invalid Το περιεχόμενο του έγγραφου είναι μη έγκυρο
• $valid Το περιεχόμενο του έγγραφου είναι έγκυρο
• $subscribed Το έγγραφο έχει υποβληθεί

Είναι ιδιότητες του έγγραφου, μπορούν να είναι αληθής ή ψευδής.

Μπορείτε να χρησιμοποιήσετε αυτές τις καταστάσεις για να εμφανίσετε σημαντικά μηνύματα χρήστη. Για παράδειγμα, αν ένα πεδίο είναι υποχρεωτικό και ο χρήστης το αφήνει κενό, θα πρέπει να δώσετε στον χρήστη προειδοποίηση:

παράδειγμα

Αν το πεδίο έχει επαφές και είναι κενό, εμφανίζεται το μήνυμα σφάλματος:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Το όνομα είναι υποχρεωτικό.</span>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Κλάσεις CSS

Το AngularJS προσθέτει CSS κλάσεις στα έγγραφα και τα πεδία εισαγωγής ανάλογα με την κατάσταση τους.

Οι παρακάτω κλάσεις προστίθενται στα πεδία εισαγωγής ή αφαιρούνται από τα πεδία εισαγωγής:

• ng-untouched Ο τομέας δεν έχει επαφές
• ng-touched Ο τομέας έχει επαφές
• ng-pristine Ο τομέας δεν έχει τροποποιηθεί
• ng-dirty Ο τομέας έχει τροποποιηθεί
• ng-valid Το περιεχόμενο του τομέα είναι έγκυρο
• ng-invalid Το περιεχόμενο του τομέα είναι μη έγκυρο
• ng-valid-key Επαλήθευση μιας κλειδιάς κάθε φορά. Παράδειγμα:ng-valid-requiredείναι πολύ χρήσιμο όταν υπάρχουν πολλαπλές υποχρεωτικές επαλήθευσεις
• ng-invalid-key Παράδειγμα:ng-invalid-required

Οι παρακάτω κλάσεις προστίθενται στο έγγραφο ή αφαιρούνται από το έγγραφο:

• ng-pristine Δεν υπάρχει κανένας τομέας που δεν έχει τροποποιηθεί
• ng-dirty Ένας ή περισσότεροι τομείς έχουν τροποποιηθεί
• ng-valid Το περιεχόμενο του έγγραφου είναι έγκυρο
• ng-invalid Το περιεχόμενο του έγγραφου είναι μη έγκυρο
• ng-valid-key Επαλήθευση μιας κλειδιάς κάθε φορά. Παράδειγμα:ng-valid-requiredείναι πολύ χρήσιμο όταν υπάρχουν πολλαπλές υποχρεωτικές επαλήθευσεις
• ng-invalid-key Παράδειγμα:ng-invalid-required

Αν η κλάση αντιπροσωπεύει τιμή: falseαν δεν υπάρχει, αυτές οι κλάσεις θα διαγραφούν.

Προσθέστε στυλ σε αυτές τις κλάσεις, για να παρέχετε καλύτερη και πιο αισθητική διεπαφή χρήστη στην εφαρμογή σας.

παράδειγμα

Χρήση τυποποιημένων CSS για την εφαρμογή στυλ:

<style>
input.ng-invalid {
  background-color: pink;
};
input.ng-valid {
  background-color: lightgreen;
};
</style>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Μπορείτε επίσης να ρυθμίσετε το στυλ του έγγραφου.

παράδειγμα

Εφαρμογή στυλ για το μη τροποποιημένο (πρωτότυπο) έγγραφο και το τροποποιημένο έγγραφο:

<style>
form.ng-pristine {
  background-color: lightblue;
};
form.ng-dirty {
  background-color: pink;
};
</style>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Προσαρμοσμένος Έλεγχος

Η δημιουργία μιας προσαρμοσμένης συνάρτησης ελέγχου απαιτεί μερικές δεξιότητες; Πρέπει να προσθέσετε μια νέα εντολή στο πρόγραμμα και να χρησιμοποιήσετε ορισμένους συγκεκριμένους παραμέτρους για να χειριστείτε τον έλεγχο εντός της συνάρτησης.

παράδειγμα

Δημιουργήστε τη δική σας εντολή, περιλαμβάνοντας μια προσαρμοσμένη συνάρτηση ελέγχου και χρησιμοποιήστε my-directive αναφέρετέ την.

Η στήλη είναι έγκυρη μόνο όταν η τιμή περιέχει το γράμμα "e":

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        };
        return value;
      };
      mCtrl.$parsers.push(myValidation);
    };
  };
});
</script>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Στο HTML, η νέα εντολή θα χρησιμοποιηθεί μέσω της χρήσης της ιδιότητας my-directive για να αναφέρεται.

Στο JavaScript, προσθέτουμε πρώτα μια ονομασία myDirective νέα εντολή.

θυμηθείτε, όταν ονομάζετε μια εντολή, πρέπει να χρησιμοποιήσετε την τεχνική CamelCase, όπως myDirectiveαλλά πρέπει να τον καλέσετε με ονόματα που χωρίζονται με μονάδες, όπως my-directive.

τότε, επιστρέψτε έναν αντικείμενο που καθορίζει τι χρειαζόμαστε ngModelείναι ngModelController.

σχεδιάστε μια συνάρτηση σύνδεσης που παίρνει μερικές παραμέτρους, μεταξύ των οποίων η τέταρτη παράμετρος mCtrl είναι ngModelController.

τότε καθορίστε μια συνάρτηση, στην παρούσα παράδειγμα ονομάζεται myValidation，παίρνει ως παράμετρο την τιμή του στοιχείου εισόδου.

ελέγξτε αν η τιμή περιέχει τα γράμματα "e" και ρυθμίστε την ισχύ του ελέγχου μοντέλου true ή false.

τέλοςmCtrl.$parsers.push(myValidation); will be myValidation Functions are added to an array of other functions, which will be executed each time the input value changes.

Validation Example

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>
<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>
<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {}}
  $scope.user = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Προσπαθήστε να το δοκιμάσετε προσωπικά

Αξία HTML Φόρμας novalidate Χρησιμοποιείται για να απενεργοποιήσει την προεπιλεγμένη επαλήθευση του περιηγητή.

Παράδειγμα εξήγησης:

Οδηγίες AngularJS ng-model Συνδέστε το στοιχείο εισαγωγής στο μοντέλο.

Ο μοντέλο αντικείμενο έχει δύο ιδιότητες:user και email.

λόγω ng-showμόνο όταν το user ή το email είναι $dirty και $invalid Θα εμφανιστούν spans με το χρώμα color:red