angular表单验证2

前言

在以前的文章《angular表单验证》中主要介绍了一些关于angular表单验证的基础知识。在此篇中将着重以扩展angular表单验证的相关内容和实际开发中的应用为主。

---

表单验证使用场景1

在实际的开发中咱们可能会有这样的状况。咱们但愿能够在用户输入完成以后失去焦点以后进行验证。若是验证不经过则提交错误信息。若是想要实现这个效果。须要添加一个自定义的指令。

app.directive('ngFoucus',[function(){
var FOCUS_CLASS='ng-focused';
return{
restrict:'A',
require:'ngModel',
link:function(scope,element,attrs,ctrl){
        ctrl.$focused=false;

element.bind('focus',function(evt){
element.addclass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=true;});
}).
bind('blur',function(evt){
element.removeClass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=false;});});}}
}]);

将ngFocus指令添加到input元素上就能够使用这个指令。

<input ng-class="{error:signup_form.name.$dirty&&signup_form.name.$invalid}"
  type="text"
placeholder="name"
name="name"
ng-model="signup.name"
ng-minlength="3"
ng-maxlength="200
required"
ng-focus
/>

ngFocus指令给表单输入字段的blur和focus添加了对应的行为。添加了一个名为ng-foucsed的类并将$focused的值设置为true。接下来，能够根据表单是否具备焦点来展现独立的错误信息。以下

<div class="error" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&!signup_form.name.$focused">
</div>

固然也能够在ngModel控制中使用$isEmpty()方法来判断输入的字段是否为空。当输入字段为空时返回true不然返回false。

angular新版本的表单验证

在以前的代码中angular的表单验证是相对比较复杂的组件。用起来并非特别的方便。也不够简洁。
可是在新得angular版本之后（1.3+）咱们能够使用更简单的方式来作表单验证。

ng-messages

要使用ng-messages这个指令。咱们必须先安装这个模块。咱们能够本身下载下来直接引用到页面上，或者使用
$bower install --save angular-messages 来安装
，安装完成以后呢。咱们须要注入 到模块中

angular.module('myapp',['ngMessages'])

为了对比以前的表单验证方式，这里我先使用老版本的表单验证写一个例子。

/*old*/

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-show="signup_form.name.$dirty&&gignup_form.name&invalid&&signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">姓名不能为空</small>
<small class="error" ng-show="signup_form.name.$error.minlength">姓名过短</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">姓名太长</small>
</div>
</div>
</div>
</fieldset>
</form>





/*new*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名过短</div>
<div ng-message="maxlength">姓名太长</div>
</div>
</div>
</div>
</form>

借助ngMessages 表单自己比以前的更简单了。而且更好理解。可是在上面的代码中还有一个问题，就是一次只能显示一个错误信息。
若是咱们想同时显示全部的错误信息。也简单，咱们只需在ng-messages 指令旁边加上 ng-messages-multiple

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-multiple>
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名过短</div>
<div ng-message="maxlength">姓名太长</div>
</div>

若是咱们有不少的表单页的话。咱们能够把一些通用的验证提示封装套一个模板页面中

<!--in temples/errors.html-->
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名过短</div>
<div ng-message="maxlength">姓名太长</div>

而后咱们能够在视图中使用 ng-messages-include 属性来引入这个模板来改进表单的结构

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-include="templates/errors.html"></div>

上面的示例当中都是使用angular自带的验证和ng-messages结合使用。那自定义验证如何操做呢？
比方说我想要建立一个自定义验证来实现验证表单中的用户名是否被注册：

/*首先建立一个自定义指令*/
app.directive('ensureUnique',function($http){
return {
require:'ngmodel',
link:function(scope,ele,attrs,ctrl){
var url=attrs.ensureUnique;
   ctrl.$parsers.push(function(val){
 if(!val||val.length==0)
retrun;
});
ngModel.$setValidity('checkingAvailability',true);
ngModel.$setValidity('usernameAvailablity',false);
$http({
 Method:'GET',
url:url,
params:{
username:val}
}).success(function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',true);
})['catch'](function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',false);
});
retrun val;
}
}
});

/*页面html*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController" ensure-unique='/api/checkUsername.php'>
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">姓名不能为空</div>
<div ng-message="checkingAvailability">checking</div>
<div ng-message="usernameAvailablity">用户名已经存在</div>
</div>
</div>
</div>
</form>

在上面的用法中咱们检查了错误信息的自定义属性。为了添加自定义的错误信息，咱们将会把它们应用到自定义的ensureUnique指令的ngModel中。
这样一个自定义验证就完成了。在这里我只是演示了一个自定义验证的用法。angular的ng-messages还有不少其余的高级用法这里就再也不一一介绍了。有兴趣的同窗能够去angular官网查看文档。

结尾

以上就是关于angular表单验证的所有内容。本文做为本身的笔记的方式写了下来。文中的若有不足之处请指出。若是有问题的话能够留言。谢谢。