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);
});
});
}
}
}]);
当然你可以在input中使用ng-change事件来完成,不过个人觉得指令更好的体现了angularjs的用法。
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指令:
ng-show="newForm.password.$dirty && (newMember.password !== newMember.repassword)"
其中newForm.password.$dirty必须要有,表示密码已经被填写过。如果缺少这个验证,当用户直接输入确认密码时,就提示密码不相等。
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-validator
6、关于表单的一些验证技巧
1、novalidate
标准浏览器如火狐,谷歌等对HTML5有很好的支持。众所周知,HTML5中input的type属性已经具备了验证功能。如果你要自己定义验证方式,那么请加上novalidate属性,以此避开浏览器自行验证。
2、type="number"还是ng-pattern来限制用户输入数字
你可以使用type="number"来限制输入框只能输入数字,当然你也可以用ng-pattern来验证用户输入,从而过滤掉非数字输入
参考自:https://coderwall.com/p/udpmtq