Ausführliche Erläuterung der Beispiele für die Winkelformvalidierung
- 高洛峰Original
- 2016-12-09 14:53:401102Durchsuche
Formularvalidierung
Ich komme mir vor, als wäre ich eigentlich eine sehr dumme Person, ich verschwende immer viel Zeit, nur weil ich ein Wort falsch geschrieben habe oder so, das funktioniert wirklich nicht Nein, wir müssen dieses Problem richtig behandeln. Kommen wir zur Sache. Es werden auch Formularvalidierungen wie „minlength“, „maxlength“ und „required“ unterstützt. Nummer, URL usw. Jetzt müssen wir den Stil verwenden. Wie kann man ihn dann überprüfen?
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>form1</title>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap.min.css">
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
<script type="text/javascript" src='static/plugins/angular-messages.js'></script>
</head>
<body>
<div class="col-md-6">
<form role="form" name="myForm" class="form-horizontal" novalidate>
<label>用户名</label>
<input type="email" placeholder="ng-Messages测试" name="name" ng-model="username.name"
ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error">
<div ng-message="required">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
<div ng-message='email'>正确的邮箱格式</div>
</div>
</form>
</div>
</body>
<script type="text/javascript">
angular.module("app", ['ngMessages']);
</script>
</html>Das war's, es gibt ein paar Punkte zu erklären, Der erste ist die Einführung von angle-messages.js, Der zweite ist, dass Nachrichten und Nachrichten klar verstanden werden müssen. Ah , Dritter myForm.name.$error: Dieses myForm ist der Namenswert des Formulars und name ist der Namenswert der zu überprüfenden Eingabe. Viertens können Sie die Verifizierung auch individuell anpassen. Nun, die fünften Worte sind noch nicht verraten. Die Meister können mal schauen, ob es noch etwas zu beachten gibt. Lassen Sie uns darüber sprechen, wie Sie eine benutzerdefinierte Verifizierung durchführen. Der Code lautet
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required />Sie sehen, dass es sich bei dieser Sicherstellung um eine benutzerdefinierte Verifizierung handelt , es muss nur so sein, wie es in HTML geschrieben ist. Es gibt auch einen entsprechenden Code, der mit Anweisungen geschrieben ist > Haben Sie gesehen, dass die benutzerdefinierte Überprüfung in zwei Schritten von HTML und JS durchgeführt wird? Ich fühle mich etwas niedergeschlagen und kann es nicht tun. Wie auch immer, ich habe diese beiden Codeteile gepostet, um Ihnen zu erklären, wie Sie eine benutzerdefinierte Validierung schreiben, haha
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);Nun, es gibt auch das Formularvalidierungsattribut von Anglar. Laden Sie einfach das Formular hoch, es wird klar sein Auf einen Blick ist das alles. Es ist auf Cainiao.com verfügbar, Sie können danach suchen
Dann, wie man das verwendet, okay, hier ist der Code Eine Zusammenfassung der Verwendung, 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<h2>验证实例</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>
<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>3. Bei dieser Verwendung gibt es noch ein weiteres Problem: Wenn Sie zum Beispiel zuerst ein erforderliches Feld verifizieren möchten und zu Beginn kein Inhalt im Eingabefeld vorhanden ist, wird dessen Verifizierungsaufforderung nicht angezeigt Sie müssen ihm zuerst einen Standardwert in js zuweisen. Ich bin der Meinung, dass dieser Effekt nicht gut ist. Sie sehen also, dass $scope.user = 'John Doe';js ihm zuerst einen Wert zuweist.
4. Es gibt noch eine andere Frage: Sie müssen zuerst einen Wert zuweisen, und dann müssen Sie einen Controller definieren, und ich denke, zusammenfassend denke ich, dass dies die erste Methode ist besser. .
5. Es gibt noch eine weitere Frage: Denken Sie daran, ng-model an jeden Eingang zu binden, sonst wie man es überwacht. Persönliche Meinung,
Außerdem können diese beiden tatsächlich kombiniert werden. Wenn nicht, können Sie sich den Code ansehen. Okay, kommen wir zum Code
Das ist es.