angularjs 表单校验指令_AngularJS - 表单校验

AngularJS 可以让我们更简单的实现客户端的表单校验。

要使用表单校验，我们必须确保表单有个名字与之关联。

所有的输入框都有一些基础的校验方式。比如最小长度、最大长度等。这些都可以在新的HTML5 表单属性中获取。

我们可以在表单中使用novalidate标志来避免表单自行校验。

让我们先回顾下input输入控件已有的校验项：

如果要标志必须输入，我们可以增加html5标签：required到input域中：

想要设置输入框的最小的长度，我们可以通过配置：angularJS指令ng-minlength="{number}"来实现：

同样的想要设置输入框的最大的长度，我们可以通过配置：angularJS指令ng-maxlength="{number}"来实现：

当然，我们也可以使用正则表达式来匹配，通过配置指令： ng-pattern="/PATTERN/"即可：

如果要校验电子邮箱，我们可以设置input类型为email：

如果要设置只能输入数字，我们可以设置input类型为number：

如果要设置只能输入网址，我们可以设置input类型为url：

请看下述代码：

html>

input.ng-invalid {

border: 1px solid red;

}

input.ng-valid {

border: 1px solid green;

}

Your name

placeholder="Name"

name="name"

ng-model="signup.name"

ng-minlength=3

ng-maxlength=20 required />

ng-show="signup_form.name.$dirty && signup_form.name.$invalid">

ng-show="signup_form.name.$error.required">

Your name is required.

ng-show="signup_form.name.$error.minlength">

Your name is required to be at least 3 characters

ng-show="signup_form.name.$error.maxlength">

Your name cannot be longer than 20 characters

Your email

placeholder="Email"

name="email"

ng-model="signup.email"

ng-minlength=3 ng-maxlength=20 required />

ng-show="signup_form.email.$dirty && signup_form.email.$invalid">

ng-show="signup_form.email.$error.required">

Your email is required.

ng-show="signup_form.email.$error.minlength">

Your email is required to be at least 3 characters

ng-show="signup_form.email.$error.email">

That is not a valid email. Please input a valid email.

ng-show="signup_form.email.$error.maxlength">

Your email cannot be longer than 20 characters

Username

placeholder="Desired username"

name="username"

ng-model="signup.username"

ng-minlength=3

ng-maxlength=20

ensure-unique="username" required />

Please input a username

Your username is required to be at least 3 characters

Your username cannot be longer than 20 characters

That username is taken, please try another

Submit

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);

});

});

}

};

}]);