Heim > Artikel > Web-Frontend > AngularJS implementiert die manuelle Formularüberprüfung und die automatische Formularüberprüfung_AngularJS

AngularJS implementiert die manuelle Formularüberprüfung und die automatische Formularüberprüfung_AngularJS

WBOYOriginal: 2016-05-16 15:26:361187Durchsuche

In AngularJS gibt es grob zwei Arten der Formularvalidierung: die manuelle Validierung und die automatische Validierung.
1. Manuelle Überprüfung
Bei der sogenannten manuellen Überprüfung erfolgt die Überprüfung anhand der Attribute des AngularJS-Formulars. Um ein AngularJS-Formular zu werden, müssen zwei Bedingungen erfüllt sein:

1. Fügen Sie novalidate="novalidate" zum Formularelement hinzu;

2. Fügen Sie name="theForm" zum Formularelement

wie folgt hinzu:

● Das Hinzufügen von novalidate="novalidate" zum Formular bedeutet, dass das Formular die HTML5-Validierungsfunktion nicht mehr verwendet

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

● Das Hinzufügen von name="theForm" zum Formular bedeutet, dass der Name des Formulars theForm ist. Bei der Verwendung von theForm überprüfen wir beispielsweise, ob das Formular theForm.$submitted

geändert wurde ● Senden Sie das Formular über ng-submit

● formModel ist ein Attribut in $scope
● Manuelle Überprüfung der E-Mail-Adresse des Formulars unter Verwendung vieler Eigenschaften des AngularJS-Formulars, z. B. theForm.email.$valid, theForm.$pristine, theForm.$submitted, theForm.email.$error.required, theForm.email.$ error.email
● Drucken Sie alle Attribute des AngularJS-Formulars über e03b848252eb9375d56be284e690e873{{theForm | json}}bc5574f69a0cba105bc93bd3dc13c4ec
aus

Oben werden alle Eingaben mit Namensattributen angezeigt.

{
 "$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
 }
}

Das Modul, der Controller und die Methode zum Senden des Formulars sind in der Datei second.js definiert.

Der Vorteil der oben genannten Formularüberprüfungsmethode besteht darin, dass sie gut kontrollierbar, aber relativ umständlich ist.

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

2. Automatische Überprüfung
Eine weitere Formüberprüfungsmethode 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, wird außerdem das Drittanbietermodul

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

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:

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

● Installation: Bower Install Angular-ladda --save

● Modulabhängigkeit: var myApp = angle.module("app", ["angular-ladda"]);

● Zitat:

Die Seite sieht wie folgt aus:

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

Schauen Sie sich dazu zunächst die Schaltfläche „Senden“ an:

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

● Der ladda-Attributwert ist ein boolescher Wert. „true“ bedeutet, dass der dynamische Warteeffekt angezeigt wird, „false“ bedeutet, dass der dynamische Warteeffekt nicht angezeigt wird. Hier handelt es sich um ein Attribut im Bereich

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

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

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?

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

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

Verwenden Sie oben den defaultErrorMessageResolver-Dienst von angle-auto-validate in der run-Methode, um die Fehlermeldung anzupassen. tooYoung und tooOld auf der Seite entsprechen hier errorMessages['tooYoung'] und errorMessages['badUsername'].

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

Der gesamte Inhalt dieses Artikels wird hier vorgestellt. Ich hoffe, er wird Ihnen dabei helfen, AngularJS für die Implementierung der Formularüberprüfung zu erlernen.

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

AngularJS implementiert die manuelle Formularüberprüfung und die automatische Formularüberprüfung_AngularJS

In Verbindung stehende Artikel