Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:26:36
original
1235 Les gens l'ont consulté

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}}
   
Copier après la connexion

● 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 via

{{theForm | json}}

{
 "$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
 }
}
Copier après la connexion

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);
  };
});
Copier après la connexion

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 :
● 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>
Copier après la connexion

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>

Copier après la connexion

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}}
   
<script src="../node_modules/angular-sanitize/angular-sanitize.min.js"></script> <script src="../node_modules/angular-localize/angular-localize.min.js"></script>
Copier après la connexion

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>
Copier après la connexion

● 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>
Copier après la connexion

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;
      });
  };
});
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Article précédent:Comment créer et soumettre dynamiquement un formulaire à l'aide des compétences JavaScript_javascript Article suivant:jquery implémente les effets spéciaux du carrousel automatique programmé_jquery
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal