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