recherche

Maison >interface Web >js tutoriel >Apprenez à utiliser le framework AngularJS pour obtenir des effets de vérification de contrôle avec une seule ligne de code JS_AngularJS

Apprenez à utiliser le framework AngularJS pour obtenir des effets de vérification de contrôle avec une seule ligne de code JS_AngularJS

WBOY
WBOYoriginal
2016-05-16 16:43:371403parcourir

Comme le montre l'image ci-dessus, nous devons implémenter les fonctions de vérification suivantes :

Les contrôles sont tous des contrôles incontournables
Les deux doivent contrôler la longueur maximale
Lors de la première ouverture de la page, le champ ne peut pas être affiché dans un état d'erreur
Une fois le contenu d'entrée effacé, le contrôle d'entrée requis doit être affiché dans un état d'erreur
Ce n'est que lorsque toutes les entrées sont légales que le bouton de publication peut devenir disponible
Grâce à AngularJS, nous pouvons facilement implémenter ces exigences avec seulement 1 ligne de code JS. Le style d'interface utilisateur utilisé ici est Bootstrap. Commençons par l'exemple de code :

HTML. 

<!DOCTYPE html>
<html lang="zh-cn" ng-app="ftitApp">
<head>
 <meta charset="utf-8" />
 <title>Demo</title>
 <link href="/Content/bootstrap.css" rel="stylesheet"/>
 <script src="/Scripts/angular.js"></script>
</head>
<body>
 <div class="container body-content">
  <!-- 主要内容区域 -->
  <div class="row main-content">
   <div class="col-md-9">

    <!-- 联系我们表单区域 -->
    <form action="/Contact/Create" method="post" role="form" name="createContactForm" ng-controller="ContactCreateController">
     <!-- UserName 您的称呼 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.UserName.$pristine && createContactForm.UserName.$valid, 'has-error' : !createContactForm.UserName.$pristine && createContactForm.UserName.$invalid }">
      <label for="UserName">您的称呼*</label>
      <input type="text" class="form-control" ng-model="userName" name="UserName" autofocus="" required ng-maxlength=30>
      <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- UserMail 邮箱地址 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid, 'has-error' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid }">
      <label for="UserMail">邮箱地址*</label>
      <input type="email" class="form-control" ng-model="userMail" name="UserMail" required ng-maxlength=30>
      <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- Subject 主题 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.Subject.$pristine && createContactForm.Subject.$valid, 'has-error' : !createContactForm.Subject.$pristine && createContactForm.Subject.$invalid }">
      <label for="Subject">主题*</label>
      <input type="text" class="form-control" ng-model="subject" name="Subject" required ng-maxlength=100>
      <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- Content 内容 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.Content.$pristine && createContactForm.Content.$valid, 'has-error' : !createContactForm.Content.$pristine && createContactForm.Content.$invalid }">
      <label for="Content">内容*</label>
      <textarea cols="4" rows="5" class="form-control" ng-model="content" name="Content" required ng-maxlength=1000></textarea>
      <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- 提交按钮 -->
     <div class="form-group">
      <div ng-show="createContactForm.$valid">
       <input type="image" src="/Content/images/comment_publish_button.png" onsubmit="submit();" value="发布" ng-disabled='!createContactForm.$valid' />
      </div>
      <div ng-show="!createContactForm.$valid">
       <img src="/Content/images/invalid_publish_button.png" />
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
 
 <script src="/Scripts/ftit/ContactCreateController.js"></script>
</body>
</html>

Code JS (en réalité une seule ligne)

ContractCreateController.js

var ftitAppModule = angular.module('ftitApp', []);

C'est tout. Expliquons quelques points clés :

ng-class : Cette balise est utilisée pour contrôler la valeur de la classe. Par exemple, ng-class="{'has-success' : !createContactForm.Content.$pristine} signifie que si la valeur de !createContactForm.Content.$pristine est vraie, la valeur de la classe est has-success.
ng-show : contrôle si le contrôle doit être affiché.
createContactForm.$valid : Une fois toutes les vérifications réussies, la valeur est vraie, sinon elle est fausse
createContactForm.Content.$valid : Identifie si le contrôle de contenu réussit la vérification, s'il est réussi, il est vrai, sinon il est faux
createContactForm.Content.$pristine : identifie si le contrôle Content n'a jamais été saisi. Vrai si jamais renseigné, faux sinon
Pour des problèmes techniques plus détaillés, veuillez consulter la documentation technique d'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：Le plug-in JQuery iScroll implémente l'actualisation déroulante et le défilement des pages en tournant effets_jqueryArticle suivant：Le plug-in JQuery iScroll implémente l'actualisation déroulante et le défilement des pages en tournant effets_jquery

Articles Liés

Voir plus