Analyse de code sur l'implémentation de la fonction de formulaire de vérification AngularJS

Cet article présente principalement la fonction AngularJSvalidation de formulaire et analyse les étapes de fonctionnement, les compétences de mise en œuvre et les précautions, Les amis dans le besoin peuvent se référer à

Cet article décrit la fonction de vérification de formulaire AngularJS avec des exemples. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Sous la juridiction d'AngularJS, chaque formulaire créera une instance de ngFormController. Chaque entrée du formulaire créera une instance ngModelController sous cette instance pour contrôler le comportement de chaque entrée.

Commencez par une simple vérification.

ngModelController d'AngularJs fournit plusieurs propriétés :

;$pristine;$dirty;$valid;$invalid$error

 : Le formulaire n'a pas changé. pristine
: La forme a changé. dirty
: Tous les contrôles respectent les règles de validation. valid
: Au moins un contrôle ne respecte pas les règles de validation. invalid
 : Il y a une erreur, mais je ne sais pas ce qui ne va pas. error

Créez un formulaire comme suit :

<form name="userForm" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span>
</form>

Tout d'abord, chaque formulaire doit avoir son propre nom. Utilisez ce nom pour contrôler l'entrée en dessous de vous. Ensuite, chaque

balise d'entrée doit avoir son propre nom. Le nom est une étape critique et est utilisé pour identifier chaque entrée différente et ainsi identifier différents ngModelControllers. Utilisez un modèle pour définir vos propres règles d'expression régulière. Utilisez $error pour vérifier si l'expression régulière est correcte. Et attribuez-le à la directive ng-show. S'il y a une erreur, l'intégralité de $error renverra true et les informations d'invite définies seront affichées jusqu'à ce que l'expression régulière soit réussie, $error renverra false et ng-show la masquera.

L'exemple simple ci-dessus ne vous oblige pas à réinitialiser vous-même le comportement du

contrôleur, tout est par défaut d'AngularJ. Vous pouvez voir que le code de jugement dans ng-show peut en fait être complété par JS plus tard, afin que vous puissiez voir le processus spécifique de ngModelController.

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span style="color:red" ng-show="showError(userForm.name,&#39;pattern&#39;)">用户名必须XX</span>
  <span style="color:green" ng-show="showSuccess(userForm.name)">成功！</span>
  <!--对按钮进行动态锁定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>

/*JS*/
app.controller("main",function($scope){
  $scope.showError=function(ngModelController,abc){
    return ngModelController.$error[abc];
  };
  $scope.showSuccess=function(ngModelController){
    return ngModelController.$valid; /*至少有1错误，返回false，无错误，返回true*/
  };
   $scope.submit=function(ngFormController){
    return ngFormController.$invalid; /*valid的取反*/
  };
});

Le jugement est effectué directement dans le ngModelController du contrôleur. Il y a un piège, c'est-à-dire qu'il n'y a aucun paramètre pour juger des attributs tels que $valid. Pour juger $error, vous devez indiquer "ce qu'il faut juger". Je lui ai transmis ma propre expression régulière.

AngularJs peut également "verrouiller" le bouton de soumission du formulaire. Mais il convient de noter qu'à l'heure actuelle, le contrôleur correspondant à BUTTON n'est plus le ngModelController pour une certaine entrée, mais le ngFormController pour l'ensemble du formulaire. Par conséquent, le $invalid à l'intérieur sert à déterminer s'il y a des problèmes avec toutes les entrées. , et tout ira bien quand .

Réflexion : Des restrictions telles que l'expression régulière ou la longueur minimale peuvent être écrites dans des fichiers JS.

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!