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

AngularJS manuelle Formularvalidierung_AngularJS

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

Die sogenannte manuelle Überprüfung besteht darin, die Attribute des AngularJS-Formulars zu überprüfen. Um ein AngularJS-Formular zu werden, müssen zwei Bedingungen erfüllt sein:

1. novalidate="novalidate" zum Formularelement hinzufügen;

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

lautet wie folgt:

<!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 class="navbar navbar-inverse navbar-fixed-top">
 <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 novalidate="novalidate" zum Formular bedeutet, dass das Formular die HTML5-Validierungsfunktion nicht mehr verwendet
● 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
● Manuell überprüfte die E-Mail-Adresse des Formulars unter Verwendung vieler Attribute des AngularJS-Formulars, wie 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

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

Oben werden alle Eingaben mit Namensattributen angezeigt.

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

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

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

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：Beispielcode für JavaScript-Operationen für ausgewählte Elemente und Optionen_Javascript-FähigkeitenNächster Artikel：Beispielcode für JavaScript-Operationen für ausgewählte Elemente und Optionen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen