教程来源：http://www.tuicool.com/articles/2Qbiqi
每天学习一点知识：
客户端表单验证是AngularJS里面最酷的功能之一。 AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。
在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令：
所有输入字段可以进行一些基本的验证，例如最小长度，最大长度，等等，这些都是HTML5标签的属性验证
ng-minlength：
ng-maxlength：
ng-pattern：
ng-model:
H5表单验证
<input type="text" required />
<input type="text" ng-minlength=5 ng-maxlength=20 />
<input type="text" ng-pattern="/a-zA-Z/" />
<input type="email" name="email" ng-model="user.email" />
<input type="number" name="email" ng-model="user.age" />
<input type="url" name="homepage" ng-model="user.facebook_url" />
关于自定义验证
自定义验证--我们将实现一个指令，指令名：ensureUnique
AngularJS可以很容易的使用指令来添加自定义验证。
例如，我们要验证我们的用户名是可用的（在数据库中不重复）。要做到这一点，我们将实现一个指令，它在输入字符变化时触发一个Ajax请求：
var app = angular.module('validationExample', []);
app.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);
});
});
}
}
}]);
转载请注明原文地址: https://ju.6miu.com/read-1308581.html
