Heim >Web-Frontend >js-Tutorial >AngularJS automatische Formularvalidierung_AngularJS

AngularJS automatische Formularvalidierung_AngularJS

WBOYOriginal: 2016-05-16 15:16:441103Durchsuche

Eine weitere Methode zur Formularüberprüfung von AngularJS ist die automatische Überprüfung, die durch Anweisungen implementiert wird. Zusätzlich zu den Anweisungen, die mit AngularJS geliefert werden, müssen Sie auch das Modul „angular-auto-validate“ eines Drittanbieters verwenden.

Über Angular-Auto-Validate:

Installation: npm i angle-auto-validate
Zitat: b4e9f4e8d58ad62774aad8e6d2549ab22cacc6d41bbb37262a98f745aa00fbf0
Modulabhängigkeit: var myApp = angle.module("app", ["jcs-autoValidate"]);

Um Fehlermeldungen zu lokalisieren, benötigen Sie außerdem das Drittanbietermodul angle-localize:

Installation: npm install angle-localize --save
Modulabhängigkeit: var myApp = angle.module("app", ["localize"]);
Zitat:

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

Wenn Sie außerdem auf die Schaltfläche „Formular senden“ klicken, müssen Sie die Schaltfläche deaktivieren und einen Warteeffekt anzeigen. Sie müssen das Drittanbietermodul angle-ladda verwenden:

Installation: Bower Install Angular-ladda --save
Modulabhängigkeit: var myApp = angle.module("app", ["angular-ladda"]);
Zitat:

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

Die Seite sieht wie folgt aus:

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

Sehen Sie sich zuerst die Schaltfläche „Senden“ an:

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

Der Wert des Ladda-Attributs ist ein boolescher Wert. True bedeutet, dass der dynamische Warteeffekt angezeigt wird. Bei False handelt es sich hier um ein Attribut im Bereich
data-style="expand-right" bedeutet, dass auf der rechten Seite der Schaltfläche ein dynamischer Warteeffekt angezeigt wird

Nehmen wir als Beispiel das Feld „Alter“ im Formular:

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

Unter diesen sind „min“ und „max“ die Anweisungen von AgularJS und „ng-min-err-type“ ist die Richtlinie von „angular-auto-validate“. Die hier befolgte Konvention ist der Direktivenname -err-type der ng-AngularJS-Formularvalidierung. Welche Funktionen haben tooYoung und tooOld und wo werden sie verwendet?

wird auf Modulebene verwendet und ist in der Datei form_validation_auto.js definiert.

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass ich mich mit der manuellen Formularüberprüfung von AngularJS auskenne.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Node.js implementiert die Zusammenführung von JS-Dateien in „gadget_node.js“.Nächster Artikel：Node.js implementiert die Zusammenführung von JS-Dateien in „gadget_node.js“.

In Verbindung stehende Artikel

Mehr sehen