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>
<input type="text" placeholder="Desired username" name="username" ng-model="signup.username" ng-minlength=3 ng-maxlength=20 ensure-unique="username" required />
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.
