Maison > Article > interface Web > AngularJS implémente la vérification manuelle du formulaire et la vérification automatique du formulaire_AngularJS

AngularJS implémente la vérification manuelle du formulaire et la vérification automatique du formulaire_AngularJS

WBOYoriginal: 2016-05-16 15:26:361234parcourir

Il existe environ deux types de validation de formulaire dans AngularJS, l'une est la validation manuelle et l'autre est la validation automatique.
1. Vérification manuelle
La vérification dite manuelle consiste à vérifier via les attributs du formulaire AngularJS. Pour devenir un formulaire AngularJS, deux conditions doivent être remplies :

1. Ajoutez novalidate="novalidate" à l'élément de formulaire

2. Ajoutez name="theForm" à l'élément de formulaire, comme suit :

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav >
 <div class="container">
  <div class="navbar-header">
   <a href="/" class="navbar-brand">Form Submitting</a>
  </div>
 </div>
</nav>
 
<div class="container main-content" ng-controller="myCtrl1">
 <!--novalidate让表单不要使用html验证-->
 <!--theForm变成scope的一个字段-->
 <form ng-submit="onSubmit(theForm.$valid)" novalidate="novalidate" name="theForm">
  <div class="form-group">
   <label for="name">Name</label>
   <input type="text" class="form-control" id="name" ng-model="formModel.name"/>
  </div>
 
  <div class="form-group" ng-class="{
   'has-error': !theForm.email.$valid && (!theForm.$pristine || theForm.$submitted),
   'has-success': theForm.email.$valid && (!theForm.$pristine || theForm.$submitted)
   }">
   <label for="email">Email</label>
   <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required" name="email"/>
   <p class="help-block" ng-show="theForm.email.$error.required && (!theForm.$pristine || theForm.$submitted)">必填</p>
   <p class="help-block" ng-show="theForm.email.$error.email && (!theForm.$pristine || theForm.$submitted)">email格式不正确</p>
  </div>
 
  <div class="form-group">
   <label for="username">Username</label>
   <input type="text" class="form-control" id="username" ng-model="formModel.username"/>
  </div>
 
  <div class="form-group">
   <label for="age">Age</label>
   <input type="number" class="form-control" id="age" ng-model="formModel.age"/>
  </div>
 
  <div class="form-group">
   <label for="sex">Sex</label>
   <select name="sex" id="sex" class="form-control" ng-model="formModel.sex">
    <option value="">Please choose</option>
    <option value="male">Mail</option>
    <option value="femail">Femail</option>
   </select>
  </div>
 
  <div class="form-group">
   <label for="password">Password</label>
   <input type="text" class="form-control" id="password" ng-model="formModel.password"/>
  </div>
 
  <div class="form-group">
   <button class="btn btn-primary" type="submit">Register</button>
  </div>
 
   <pre class="brush:php;toolbar:false">
    {{theForm | json}}

● Ajouter novalidate="novalidate" au formulaire signifie que le formulaire n'utilisera plus la fonctionnalité de validation HTML5
● L'ajout de name="theForm" au formulaire signifie que le nom du formulaire est theForm. Comment utiliser theForm, par exemple, on vérifie si le formulaire a été modifié theForm.$subowned
● Soumettez le formulaire via ng-submit
● formModel est un attribut dans $scope
● Vérification manuelle de l'e-mail du formulaire, à l'aide de nombreuses propriétés du formulaire AngularJS, telles que theForm.email.$valid, theForm.$pristine, theForm.$subowned, theForm.email.$error.required, theForm.email.$ erreur.email
● Imprimez tous les attributs du formulaire AngularJS viae03b848252eb9375d56be284e690e873{{theForm | json}}bc5574f69a0cba105bc93bd3dc13c4ec

{
 "$error": {
  "required": [
   {
    "$validators": {},
    "$asyncValidators": {},
    "$parsers": [],
    "$formatters": [
     null
    ],
    "$viewChangeListeners": [],
    "$untouched": true,
    "$touched": false,
    "$pristine": true,
    "$dirty": false,
    "$valid": false,
    "$invalid": true,
    "$error": {
     "required": true
    },
    "$name": "email",
    "$options": null
   }
  ]
 },
 "$name": "theForm",
 "$dirty": false,
 "$pristine": true,
 "$valid": false,
 "$invalid": true,
 "$submitted": false,
 "email": {
  "$validators": {},
  "$asyncValidators": {},
  "$parsers": [],
  "$formatters": [
   null
  ],
  "$viewChangeListeners": [],
  "$untouched": true,
  "$touched": false,
  "$pristine": true,
  "$dirty": false,
  "$valid": false,
  "$invalid": true,
  "$error": {
   "required": true
  },
  "$name": "email",
  "$options": null
 },
 "sex": {
  "$validators": {},
  "$asyncValidators": {},
  "$parsers": [],
  "$formatters": [],
  "$viewChangeListeners": [],
  "$untouched": true,
  "$touched": false,
  "$pristine": true,
  "$dirty": false,
  "$valid": true,
  "$invalid": false,
  "$error": {},
  "$name": "sex",
  "$options": null
 }
}

Ci-dessus, toutes les entrées avec des attributs de nom sont affichées ci-dessus.
Le module, le contrôleur et la méthode de soumission du formulaire sont définis dans le fichier second.js.

var myApp1 = angular.module('myApp1',[]);
 
myApp1.controller('myCtrl1', function($scope, $http){
  $scope.formModel = {};
 
  $scope.onSubmit = function(){
    $http.post('someurl',$scope.formModel)
      .success(function(data){
        console.log(':)');
      })
      .error(function(data){
        console.log(':(');
      });
 
    console.log($scope.formModel);
  };
});

L'avantage de la méthode de vérification de formulaire ci-dessus est qu'elle est hautement contrôlable, mais elle est relativement lourde.
2. Vérification automatique
Une autre méthode de vérification de formulaire d'AngularJS est la vérification automatique, qui est implémentée via des directives. En plus des directives fournies avec AngularJS, vous devez également utiliser le module tiers angulaire-auto-validate.
À propos de angular-auto-validate :
● Installation : npm i angulaire-auto-validate
● Citation : b4e9f4e8d58ad62774aad8e6d2549ab22cacc6d41bbb37262a98f745aa00fbf0
● Dépendance du module : var myApp = angulaire.module("app", ["jcs-autoValidate"]);
Afin de localiser les messages d'erreur, le module tiers angular-localize est également nécessaire :
● Installation : npm install angulaire-localize --save
● Dépendance du module : var myApp = angulaire.module("app", ["localize"]);
● Citation :

<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../node_modules/angular-localize/angular-localize.min.js"></script>

De plus, lorsque vous cliquez sur le bouton Soumettre le formulaire, vous devez désactiver le bouton et afficher un effet d'attente. Vous devez utiliser le module tiers angulaire-ladda :

● Installation : bower install angulaire-ladda --save
● Dépendance du module : var myApp = angulaire.module("app", ["angular-ladda"]);
● Citation :

<link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>

<script src="../bower_components/ladda/dist/spin.min.js"></script>
<script src="../bower_components/ladda/dist/ladda.min.js"></script>
<script src="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script>

La page est la suivante :

<!DOCTYPE html>
<html lang="en" ng-app="myApp1">
<head>
 <meta charset="gb2312">
 <title></title>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
 <link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/>
 <link rel="stylesheet" href="../css/main.css"/>
</head>
<body>
<nav >
 <div class="container">
  <div class="navbar-header">
   <a href="/" class="navbar-brand">Form Validating Auto</a>
  </div>
 </div>
</nav>
 
<div class="container main-content" ng-controller="myCtrl1">
 <!--novalidate让表单不要使用html验证-->
 <!--theForm变成scope的一个字段-->
 <form ng-submit="onSubmit()" novalidate="novalidate">
  <div class="form-group">
   <label for="name" class="control-label">Name</label>
   <input type="text" class="form-control" id="name" ng-model="formModel.name" required="required"/>
  </div>
 
  <div class="form-group">
   <label for="email" class="control-label">Email</label>
   <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/>
 
  </div>
 
  <div class="form-group">
   <label for="username" class="control-label">Username</label>
   <input type="text"
       class="form-control"
       id="username"
       ng-model="formModel.username"
       required="required"
       ng-pattern="/^[A-Za-z0-9_]{1,32}$/"
       ng-minlength="7"
       ng-pattern-err-type="badUsername"
    />
  </div>
 
  <div class="form-group">
   <label for="age" class="control-label">Age</label>
   <input type="number"
       class="form-control"
       id="age"
       ng-model="formModel.age"
       required="required"
       min="18"
       max="65"
       ng-min-err-type="tooYoung"
       ng-max-err-type="tooOld"
    />
  </div>
 
  <div class="form-group">
   <label for="sex" class="control-label">Sex</label>
   <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required="required">
    <option value="">Please choose</option>
    <option value="male">Mail</option>
    <option value="femail">Femail</option>
   </select>
  </div>
 
  <div class="form-group">
   <label for="password" class="control-label">Password</label>
   <input type="text" class="form-control" id="password" ng-model="formModel.password" required="required" ng-minlength="6"/>
  </div>
 
  <div class="form-group">
   <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
   <button class="btn btn-primary"
       ladda = "submitting"
       data-style="expand-right"
       type="submit">
    <span ng-show="submitting">正在注册...</span>
    <span ng-show="!submitting">注册</span>
   </button>
  </div>
 
   <pre class="brush:php;toolbar:false">
    {{formModel | json}}

Pour ce qui précède, regardez d'abord le bouton Soumettre :

<div >
 <!--<button class="btn btn-primary" ng-click="onSubmit()">Register</button>-->
 <button class="btn btn-primary"
     ladda = "submitting"
     data-style="expand-right"
     type="submit">
  <span ng-show="submitting">正在注册...</span>
  <span ng-show="!submitting">注册</span>
 </button>
</div>

● La valeur de l'attribut ladda est une valeur booléenne. true signifie que l'effet d'attente dynamique est affiché, false n'affiche pas l'effet d'attente dynamique. La soumission ici est un attribut dans la portée
. ● data-style="expand-right" signifie afficher l'effet d'attente dynamique sur le côté droit du bouton

Prenons comme exemple le champ Âge du formulaire :

<div >
 <label for="age" class="control-label">Age</label>
 <input type="number"
     class="form-control"
     id="age"
     ng-model="formModel.age"
     required="required"
     min="18"
     max="65"
     ng-min-err-type="tooYoung"
     ng-max-err-type="tooOld"
  />
</div>

Parmi eux, min, max sont les directives d'AgularJS, et ng-min-err-type est la directive d'angular-auto-validate. La convention suivie ici est le nom de la directive -err-type de validation du formulaire ng-AngularJS. Quelles sont les fonctions de TooYoung et TooOld, et où sont-elles utilisées ?
Il est utilisé au niveau du module et est défini dans le fichier form_validation_auto.js.

var myApp1 = angular.module('myApp1',['jcs-autoValidate','localize','angular-ladda']);
 
myApp1.run(function(defaultErrorMessageResolver){
  defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages){
    errorMessages['tooYoung'] = '年龄必须小于{0}';
    errorMessages['tooOld'] = '年龄不能大于{0}';
    errorMessages['badUsername'] = '用户名只能包含数字、字母或下划线';
  });
});
 
myApp1.controller('myCtrl1', function($scope, $http){
  $scope.formModel = {};
  $scope.submitting = false;
 
  $scope.onSubmit = function(){
 
    $scope.submitting = true;
    console.log('已提交');
    console.log($scope.formModel);
 
    $http.post('url',$scope.formModel)
      .success(function(data){
        console.log(':)');
        $scope.submitting = false;
      })
      .error(function(data){
        console.log(':(');
        $scope.submitting = false;
      });
  };
});

Ci-dessus, utilisez le service defaultErrorMessageResolver de angulaire-auto-validate dans la méthode d'exécution pour personnaliser le message d'erreur. tropYoung et tropOld sur la page correspondent à errorMessages['tooYoung'] et errorMessages['badUsername'] ici.

L'intégralité du contenu de cet article est présenté ici. J'espère qu'il vous sera utile d'apprendre AngularJS pour implémenter la vérification de formulaire.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

AngularJS implémente la vérification manuelle du formulaire et la vérification automatique du formulaire_AngularJS

Articles Liés