1、对用户名的唯一性验证
对表单进行验证，尤其是对用户名进行唯一性认证时，可以通过指令的形式完成：
<div class="form-group">
<label class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-10">
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
<div class="error-container" ng-show="validate_form.username.$dirty && signup_form.username.$invalid">
<small class="error" ng-show="validate_form.username.$error.required">请输入用户名</small>
<small class="error" ng-show="validate_form.username.$error.minlength || validate_form.username.$error.maxlength">
用户输入的字符数在3~20之间
</small>
<small class="error" ng-show="validate_form.username.$error.unique">用户名不唯一，请更换</small>
</div>
</div>
</div>使用如下的指令验证用户名的唯一性：
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);
});
});
}
}
}]);2、对密码和重复密码的相关验证
<div class="form-group">
<label for="password" class="col-sm-4 control-label">密码:</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password"
ng-required="true" ng-minlength="5" ng-maxlength="20" ng-model="newMember.password">
<p class="help-block" ng-show="newForm.password.$error.minlength || newForm.password.$error.maxlength" style="color: red">
密码的长度必须为5~20之间
</p>
</div>
</div>
<div class="form-group">
<label for="repassword" class="col-sm-4 control-label">重复密码:</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="repassword"
ng-required="true" ng-minlength="5" ng-maxlength="20" ng-model="newMember.repassword">
<p class="help-block" ng-show="newForm.password.$dirty && (newMember.password !== newMember.repassword)" style="color: red">
密码和重复密码不相等
</p>
</div>
</div>ng-show="newForm.password.$dirty && (newMember.password !== newMember.repassword)"3、给用户友好提示
一般的做法就是在填写的某一项后打绿色对号，其实非常简单，如下实现：
<div class="form-group">
<label class="col-md-3 control-label">名称：</label>
<div class="col-md-6">
<input type="text" class="form-control" ng-model="bw.zoneName" name="name" ng-maxlength='30' required/>
</div>
<div class="col-md-3">
<span ng-show="myform.name.$error.required">
<font color="red">*</font>
</span>
<span ng-show="myform.name.$valid">
<span class="glyphicon glyphicon-ok" style="color: green"></span>
</span>
</div>
</div>
也就是使用$valid属性，当输入合法时显示对号，非法时显示*号。也可以在进行统一错误的提示，如下：
<div class="form-group" ng-show="validateForm.$errors.length > 0 ">
<label class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="alert alert-danger">{{ validateForm.$errors[0] }}</div>
</div>
</div>4、使用ng-pattern进行验证
常用的正则表达式如下：
对URL进行验证：^[a-zA-z]+://[^\s]*$/
对数字进行验证：/^-?[1-9]\d*$/
对邮箱进行验证：/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
对手机号进行验：/^[1][358][0-9]{9}$/
5、使用表单框架进行验证
看着很牛B的样子，不知道实际好不好用，亲们自己可以去试一下，github地址如下：
https://github.com/why520crazy/angular-w5c-validator6、关于表单的一些验证技巧
1、novalidate
标准浏览器如火狐，谷歌等对HTML5有很好的支持。众所周知，HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式，那么请加上novalidate属性，以此避开浏览器自行验证。
2、type="number"还是ng-pattern来限制用户输入数字
你可以使用type="number"来限制输入框只能输入数字，当然你也可以用ng-pattern来验证用户输入，从而过滤掉非数字输入
参考自：https://coderwall.com/p/udpmtq
