Méthode d'implémentation de la fonction de validation de formulaire AngularJS

Cet article présente principalement en détail la fonction de vérification de formulaire AngularJS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Il est très important de pouvoir donner un retour visuel en temps réel en fonction de ce que l'utilisateur saisit dans le formulaire. Dans le contexte de la communication interhumaine, le retour d'information fourni par la validation du formulaire est aussi important que l'obtention d'une saisie correcte.

La validation du formulaire fournit non seulement des commentaires utiles aux utilisateurs, mais protège également nos applications Web contre les dommages causés par une saisie malveillante ou incorrecte. Nous devons faire de notre mieux pour protéger le backend sur le frontend Web.

AngularJS peut combiner la fonction de validation de formulaire HTML5 avec ses propres instructions de validation, et c'est très pratique. AngularJS fournit de nombreuses instructions de validation de formulaire.

<form name="form" novalidate>
  <label name="email">Your email</label>
  <input type="email" name="email" ng-model="email" placeholder="Email Address"/>
</form>

Pour utiliser la validation de formulaire, assurez-vous d'abord que le formulaire a un attribut de nom comme dans l'exemple ci-dessus.

Tous les champs de saisie peuvent être soumis à une validation de base, comme la longueur maximale et minimale, etc. Ces fonctionnalités sont fournies par les nouveaux attributs de formulaire HTML5.

Si vous souhaitez bloquer le comportement de validation par défaut du navigateur pour le formulaire, vous pouvez ajouter la balise novalidate à l'élément du formulaire

1 Champs obligatoires

Valider une saisie de formulaire. Qu'il soit renseigné, ajoutez simplement la balise HTML5 requise sur l'élément du champ de saisie :

Remarque : l'attribut obligatoire s'applique aux types suivants : texte, recherche, url, téléphone, email, mot de passe, sélecteurs de date, numéro, case à cocher, radio et fichier

<input type="text" required />

2. Longueur minimale ng-minleng="{number}"

Vérifiez si la longueur du texte de la saisie du formulaire est supérieur à une certaine valeur minimale, dans Utilisez la directive AngularJS ng-minleng="{number}"

<input type="text" ng-minlength="5" />　

3 sur Longueur maximale ng-maxlength="{number}"

. le champ de saisie pour vérifier si la longueur du texte de la saisie du formulaire est inférieure ou égale à une certaine valeur maximale, utilisez la directive AngularJS ng-maxlength="{number}"

<input type="text" ng-maxlength="20" />

4. ng-pattern="/PATTERN/"

Utilisez ng-pattern="/PATTERN/" pour vous assurer que l'entrée correspond à l'expression régulière spécifiée :

<input type="text" ng-pattern="[a-zA-Z]" />　　

5. >

Vérifiez que le contenu d'entrée est un e-mail. Définissez simplement le type d'entrée sur e-mail comme suit :

<input type="email" name="email" ng-model="user.email" />

6. Numéro

Vérifiez si le contenu d'entrée est un nombre, définissez le type d'entrée sur nombre :

<input type="number" name="age" ng-model="user.age" />

7. URL

Vérifiez si le contenu d'entrée est une URL, définissez le type d'entrée sur url :

<input type="url" name="homepage" ng-model="user.facebook_url" />

Variables de contrôle sous la forme

Les propriétés du formulaire sont accessibles dans l'objet $scope auquel elles appartiennent, et nous pouvons accéder à l'objet $scope, donc JavaScript peut accéder indirectement au propriétés du formulaire dans le DOM. Avec l'aide de ces propriétés, nous pouvons apporter des réponses en temps réel (comme tout le reste dans AngularJS) au formulaire. Ces propriétés sont les suivantes. (Notez que ces propriétés sont accessibles en utilisant le format suivant.)

formName.inputFieldName.property

■ Forme non modifiée

Il s'agit d'une propriété booléenne utilisée pour déterminer si le l'utilisateur a modifié le formulaire. Si elle n'a pas été modifiée, la valeur est vraie, si elle a été modifiée, la valeur est fausse

formName.inputFieldName.$pristine

Forme modifiée

Comme tant que l'utilisateur a modifié le formulaire, peu importe si la saisie est vérifiée, cette valeur renverra true

formName.inputFieldName.$dirty

■Forme juridique

Cette L'attribut booléen est utilisé pour déterminer si le contenu du formulaire est légitime. Si le contenu actuel du formulaire est légal, la valeur de l'attribut suivant est vraie :

formName.inputFieldName.$valid

■ Forme illégale

Cet attribut booléen est utilisé pour déterminer si le contenu du formulaire est illégal. Si le contenu actuel du formulaire est illégal, la valeur de l'attribut suivant est vraie :

formName.inputFieldName.$invalid

■ Erreur

Ceci est fourni par AngularJS Autre propriété très utile : l'objet $error. Il contient toutes les validations du formulaire actuel, ainsi que des informations indiquant si elles sont valides ou non. Utilisez la syntaxe suivante pour accéder à cette propriété :

formName.inputfieldName.$error

$parsers

Lorsque l'utilisateur interagit avec le contrôleur, et $setViewValue() dans ngModelController Lorsque la méthode est appelée, les fonctions du tableau $parsers seront appelées une par une dans un pipeline. Une fois le premier $parse appelé, le résultat de l'exécution sera transmis au deuxième $parse, et ainsi de suite

Ces fonctions peuvent convertir la valeur d'entrée ou définir la légalité du formulaire via $setValidity() fonction .

L'utilisation du tableau $parsers est l'un des moyens d'implémenter une validation personnalisée.

Par exemple, si nous voulons nous assurer que la valeur d'entrée est comprise entre deux valeurs données, nous pouvons pousser une nouvelle fonction dans le tableau $parsers, qui sera appelée dans la chaîne de vérification.

La valeur renvoyée par chaque $parser sera transmise au $parser suivant. Renvoyez undefined lorsque vous ne souhaitez pas que le modèle de données soit mis à jour.

html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单测试</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="angular.1.2.13.js"></script>
</head>
<body>
  <p ng-controller="TestController">
    <form name="testForm">
      <input type="number" name="inputs" ng-test ng-model="obj.number">
      <span ng-show="testForm.inputs.$error.test">good</span>
      <span ng-hide="testForm.inputs.$error.test">bad</span>
      <p>{{ testForm.inputs.$valid }}</p>
      <p>{{ testForm.inputs.$invalid }}</p>
      <p>{{ obj.number }}</p>
    </form>
  </p>
  <script type="text/javascript" src="test5app.js"></script>
</body>
</html>

javascript ( test5app.js )

angular.module('myApp', []).controller('TestController', function($scope) {
  $scope.obj = {
    number: 34
  }
}).directive('ngTest', function() {
  return {
    require: '?ngModel',
    restrict: 'AE',
    link: function($scope, iElm, iAttrs, ngModel) {
      if (!ngModel) return;
      ngModel.$parsers.push(function(viewValue) {
        var num = parseInt(viewValue);
        if (num >= 0 && num < 99) {
          ngModel.$setValidity('test', true);
          return viewValue
        } else {
          ngModel.$setValidity('test', false);
          return undefined
        }
      })
    }
  }
});

Recommandations associées :

Introduction au plug-in de validation de formulaire jquery.validate

Explication détaillée de la fonction de validation de formulaire implémentée par AngularJS lors de la mise et de la perte de focus

Exemple détaillé de jQuery remplissant la fonction de vérification de formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!