Maison >interface Web >js tutoriel >Validation automatique du formulaire AngularJS_AngularJS

Validation automatique du formulaire AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:16:441102parcourir

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 la validation automatique angulaire :

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, vous avez également besoin du module tiers angulaire-localize :

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 :

<html>
<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 class="navbar navbar-inverse navbar-fixed-top">
 <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}}

Regardez d'abord le bouton Soumettre :

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

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

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 ?

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;
   });
 };
});

Ce qui précède représente l'intégralité du contenu de cet article. J'espère pouvoir maîtriser la vérification manuelle des formulaires AngularJS.

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

Article précédent：Node.js implémente la fusion de fichiers JS gadget_node.jsArticle suivant：Node.js implémente la fusion de fichiers JS gadget_node.js

Articles Liés

Voir plus