Wie im Bild oben gezeigt, müssen wir die folgenden Verifizierungsfunktionen implementieren:
Kontrollen sind alles Kontrollen, die man unbedingt verlieren muss
Beide müssen die maximale Länge kontrollieren
Beim ersten Öffnen der Seite kann das Steuerelement nicht im Fehlerzustand angezeigt werden
Nachdem der Eingabeinhalt gelöscht wurde, muss das erforderliche Eingabesteuerelement in einem Fehlerstatus
angezeigt werden
Erst wenn alle Eingaben zulässig sind, kann die Schaltfläche „Veröffentlichen“ verfügbar werden
Mit AngularJS können wir diese Anforderungen einfach mit nur einer Zeile JS-Code umsetzen. Der hier verwendete UI-Stil ist Bootstrap. Beginnen wir mit dem Beispielcode:
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>JS-Code (eigentlich nur eine Zeile)
ContractCreateController.js
var ftitAppModule = angular.module('ftitApp', []);Das ist es. Lassen Sie uns einige wichtige Punkte erklären:
ng-class: Dieses Tag wird verwendet, um den Wert der Klasse zu steuern. Beispielsweise bedeutet ng-class="{'has-success' : !createContactForm.Content.$pristine}, dass, wenn der Wert von !createContactForm.Content.$pristine wahr ist, der Wert der Klasse has-success ist.
ng-show: Steuert, ob das Steuerelement angezeigt werden soll.
createContactForm.$valid: Nachdem alle Überprüfungen bestanden wurden, ist der Wert wahr, andernfalls ist er falsch
createContactForm.Content.$valid: Gibt an, ob das Content-Steuerelement die Überprüfung besteht. Wenn es bestanden wird, ist es wahr, andernfalls ist es falsch
createContactForm.Content.$pristine: Gibt an, ob das Content-Steuerelement noch nie eingegeben wurde. True, wenn nie eingegeben, andernfalls false
Für detailliertere technische Probleme lesen Sie bitte die technische Dokumentation von AngularJS.
