Validation automatique du formulaire AngularJS

Validation automatique du formulaire AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:16:44

original

1095 Les gens l'ont consulté

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

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 :

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

Copier après la connexion

<div class="form-group">  <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>

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.

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.