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

Validation du formulaire manuel AngularJS_AngularJS

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

La vérification dite manuelle consiste à vérifier via les attributs du formulaire AngularJS, et pour devenir un formulaire AngularJS, deux conditions doivent être remplies :

1. Ajoutez novalidate="novalidate" à l'élément de formulaire

2. Ajoutez name="theForm" à l'élément de formulaire,

est le suivant :

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

● L'ajout de novalidate="novalidate" au formulaire signifie que le formulaire n'utilisera plus la fonctionnalité de validation HTML5
● Ajouter name="theForm" au formulaire signifie que le nom du formulaire est theForm. Comment utiliser theForm, par exemple, on vérifie si le formulaire a été modifié theForm.$subowned
● Soumettez le formulaire via ng-submit
Quantity formModel est un attribut dans $scope
● Vérification manuelle de l'e-mail du formulaire, en utilisant de nombreux attributs du formulaire AngularJS, tels que theForm.email.$valid, theForm.$pristine, theForm.$subowned, theForm.email.$ erreur.required, theForm.email.$error.email
● Imprimez tous les attributs du formulaire AngularJS via e03b848252eb9375d56be284e690e873{{theForm | json}}bc5574f69a0cba105bc93bd3dc13c4ec

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

Ci-dessus, toutes les entrées avec des attributs de nom sont affichées ci-dessus.

Le module, le contrôleur et la méthode de soumission du formulaire sont définis dans le fichier second.js.

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

L'avantage de la méthode de vérification de formulaire ci-dessus est qu'elle est hautement contrôlable, mais elle est relativement lourde.

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：Exemple de code pour les opérations JavaScript sur les éléments sélectionnés et les compétences options_javascriptArticle suivant：Exemple de code pour les opérations JavaScript sur les éléments sélectionnés et les compétences options_javascript

Articles Liés

Voir plus