angularjs表单验证

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境

中,表单验证给出来的反馈同获得正确输入同等重要。表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误

的输入所破坏。我们要在Web前端尽力保护后端。

AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便。

AngularJS提供了很多表单验证指令,我们会介绍其中一些核心的验证功能,然后介绍如何创建自己的验证器。

     <form name="form" novalidate>
       <label name="email">Your email</label>
       <input type="email"

             name="email"

             ng-model="email" placeholder="Email Address" />
     </form>

借助AngularJS,我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然Web应用安全不能完全依赖客户端验证,但客户端验证可以提供表单状态的实时反馈。

要使用表单验证,首先要确保表单像上面的例子一样有一个name属性。所有输入字段都可以进行基本的验证,比如最大、最小长度等。这些功能是由新的HTML5

表单属性提供的。如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记。下面看一下可以在input元素上使用的所有验证选项。
1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

     <input type="text" required />

2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用AngularJS指令ng-minleng=

"{number}":
<input type="text" ng-minlength="5" />

3. 最大长度验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用AngularJS指令

ng-maxlength="{number}":
<input type="text" ng-maxlength="20" />

4. 模式匹配使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

     <input type="text" ng-pattern="[a-zA-Z]" />

5. 电子邮件验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

     <input type="email" name="email" ng-model="user.email" />

6. 数字验证输入内容是否是数字,将input的类型设置为number: 

<input type="number" name="age" ng-model="user.age" />

7. URL

验证输入内容是否是URL,将input的类型设置为 url:
<input type="url" name="homepage" ng-model="user.facebook_url" />

8. 自定义验证

7.2 表单验证 31
1

2345678910

在AngularJS中自定义指令是非常容易的。鉴于目前还没有介绍到指令的相关内容,第10章再深入研究如何创建自定义验证。目前先来看一下如何通过向后端服务器发送请求,并通过响应的结果来将输入字段设置为合法或不合法,以确保输入字段中的内容是唯一的。

9. 在表单中控制变量

表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中的表单属性。借助这些属性,我们可以对表单做出实时(和AngularJS中其他东西一样)响应。这些属性包括下面这些。

(注意,可以使用下面的格式访问这些属性。)

     formName.inputFieldName.property

 未修改的表单这是一个布尔属性,用来判断用户是否修改了表单。如果未修改,值为true,如果修改过值

为false:formName.inputFieldName.$pristine 修改过的表单

只要用户修改过表单,无论输入是否通过验证,该值都返回true: 11formName.inputFieldName.$dirty

12131415

formName.inputFieldName.$invalid 16错误

1718

 合法的表单这个布尔型的属性用来判断表单的内容是否合法。如果当前表单内容是合法的,下面属性的

值就是true:formName.inputFieldName.$valid 不合法的表单

这个布尔属性用来判断表单的内容是否不合法。如果当前表单内容是不合法的,下面属性的值为true:

这是AngularJS提供的另外一个非常有用的属性:$error对象。它包含当前表单的所有验证内容,以及它们是否合法的信息。用下面的语法访问这个属性:

     formName.inputfieldName.$error

如果验证失败,这个属性的值为true;如果值为false,说明输入字段的值通过了验证。

10. 一些有用的CSS样式

AngularJS处理表单时,会根据表单当前的状态添加一些CSS类(例如当前是合法的、未发生变化的,等等),这些CSS类的命名和前面介绍的属性很相似。

它们包括:

     .ng-pristine {}
     .ng-dirty {}
     .ng-valid {}
     .ng-invalid {}

它们对应着表单输入字段的特定状态。当某个字段中的输入非法时,.ng-invlid类会被添加到这个字段上。当前例子中的站点将

对应的CSS样式设置为:

     input.ng-invalid {
       border: 1px solid red;

     }
     input.ng-valid {

       border: 1px solid green;
     }

 $parsers

当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,$parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后,执行结果会传递给第二个$parse,以此类推。

这些函数可以对输入值进行转换,或者通过$setValidity()函数设置表单的合法性。使用$parsers数组是实现自定义验证的途径之一。例如,假设我们想要确保输入值在某两个

数值之间,可以在$parsers数组中入栈一个新的函数,这个函数会在验证链中被调用。每个$parser返回的值都会被传入下一个$parser中。当不希望数据模型发生更新时返回

undefined。

     angular.module('myApp')
     .directive('oneToTen', function() {

        return {
          require: '?ngModel',
          link: function(scope, ele, attrs, ngModel) {

            if (!ngModel) return;
              ngModel.$parsers.unshift(

                function(viewValue) {
                  var i = parseInt(viewValue);

                  if (i >= 0 && i < 10) {
                    ngModel.$setValidity('oneToTen', true);
                    return viewValue;

                  } else {
                      ngModel.$setValidity('oneToTen', false);
                      return undefined;

} 

});}

};});

 $formatters

7.2 表单验证 33
1

23

4

                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  15
                  16
                  17
                  18

当绑定的ngModel值发生了变化,并经过$parsers数组中解析器的处理后,这个值会被传递给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似,$formatters中的函数也可以修改并格式化这些值。

比起单纯的验证目的,这些函数更常用来处理视图中的可视变化。例如,假设我们要对某个值进行格式化。通过$formatters数组可以在这个值上执行过滤器:

     angular.module('myApp')
     .directive('oneToTen', function() {

         return {
             require: '?ngModel',
             link: function(scope, ele, attrs, ngModel) {

                 if (!ngModel) return;

                 ngModel.$formatters.unshift(function(v) {
                     return $filter('number')(v);

});}

};});

11. 组合实例下面我们一起创建一个注册表单。表单中包括用户的名字、邮件地址以及用户名。开始之前,首先看一下我们希望这个表单长成什么样子,如图7-1所示。在线示例:http://jsbin.com/ePomUnI/5/edit。
下面开始定义表单:

<form name="signup_form" novalidateng-submit="signupForm()"><fieldset>

         <legend>Signup</legend>

<button type="submit" class="button radius">Submit</button></fieldset>

</form>

图7-1 注册表单这个表单的名称是signup_form,当表单提交时我们要调用signupForm()。

下面添加用户的名字: 

  <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>
     </div>

后面的章节会讨论样式方面的内容,现在我们只会简单地把样式引入进来。本章使用Foundation1作为CSS布局的框架。

我们添加了一个表单,这个表单有一个名为name的输入字段,并且这个输入字段被ng-model指令绑定到了$scope对象的signup.name上。 

同时,我们也设置了一些验证。验证要求name字段的最小长度是3个字符,最大长度是20个字符(当长度大于等于21时输入会变为不合法)。最后,我们要求name字段是必填项。

通过使用这些属性,可以在表单未通过验证时控制展示或隐藏错误列表。用$dirty属性来确保用户未对输入内容进行修改时错误内容不会显示出来:

     <divclass="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 && signup_form.name.$invalid"><small class="error"

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

                     Your name is required.
                 </small>

                 <small class="error"
                     ng-show="signup_form.name.$error.minlength">
                     Your name is required to be at least 3 characters

                 </small>
                 <small class="error"

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

                     Your name cannot be longer than 20 characters
                 </small>

             </div>
         </div>

</div> 

将整个过程分开来看,我们只是像以前一样在表单发生改变,且输入内容不合法时才展示错

误内容。现在,我们会在特定的属性未通过验证时只展示对应的特定DOM元素。接下来看下一组验证,电子邮箱的验证:

     <div class="row">
         <div class="large-12 columns">

             <label>Your email</label>
             <input type="email"

                 placeholder="Email"
                 name="email"
                 ng-model="signup.email"
                 ng-minlength="3" ng-maxlength="20" required />

<div class="error"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid"><small class="error"

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

                     Your email is required.
                 </small>

                 <small class="error"
                     ng-show="signup_form.email.$error.minlength">
                     Your email is required to be at least 3 characters

                 </small>
                 <small class="error"

1234567

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

    That is not a valid email. Please input a valid email.
</small>

<small class="error"
    ng-show="signup_form.email.$error.maxlength">
    Your email cannot be longer than 20 characters

9

</small>
</div> 10

    </div>
</div>

现在整个表单都被包含进来了,我们来看一下电子邮件的输入字段。注意,我们将输入字段的type属性设置为email,并且在$error.email上添加了验证错误的信息。这个验证同时基于AngularJS和HTML5属性实现。 12

11

13
14
15
16
17
18

最后,看一下用户名的输入字段:

<div class="large-12 columns">
    <label>Username</label>
    <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"
        ng-show="signup_form.username.$dirty &&

                 signup_form.username.$invalid">
        <small class="error"

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

            Please input a username
        </small>

        <small class="error"
            ng-show="signup_form.username.$error.minlength">

                 Your username is required to be at least 3 characters
             </small>

             <small class="error"
                 ng-show="signup_form.username.$error.maxlength">
                 Your username cannot be longer than 20 characters

             </small>
             <small class="error"

                 ng-show="signup_form.username.$error.unique">

                 That username is taken, please try another
             </small>

         </div>
     </div>

在最后一个输入字段中除了同前面相同的验证外,还添加了一个自定义验证。这个自定义验证是用AngularJS指令定义的:

     app.directive('ensureUnique', function($http) {
         return {

             require: 'ngModel',
             link: function(scope, ele, attrs, c) {

                 scope.$watch(attrs.ngModel, function(n) {
                     if (!n) return;

                     $http({
                         method: 'POST',

                         url: '/api/check/' + attrs.ensureUnique,
                         data: {
                         field: attrs.ensureUnique,
                         value: scope.ngModel

                       }
                     }).success(function(data) {

                         c.$setValidity('unique', data.isUnique);
                     }).error(function(data) {

                         c.$setValidity('unique', false);
                     });

});}

};});

当表单内容通过验证后,会向/api/check/username发送一个POST请求来验证用户名是否可用。显然由于我们一直在讨论前端的代码,现在并没有可以用来测试这些内容的后端,尽管实现这个后端并不复杂。

最后,把按钮放进去。可以用ng-disabled指令基于表单的合法性来启用或禁用按钮:

     <button type="submit"
         ng-disabled="signup_form.$invalid"
         class="button radius">Submit</button>

在线示例:http://jsbin.com/ePomUnI/5/edit。

之前提到过,表单本身会提供$invalid和$valid属性。

尽管实时验证非常有用,但是当用户还没有完成输入时就弹出一个错误提示,这种体验是非常糟糕的。应该在用户提交表单或完成当前字段中的输入后,再提示验证信息,这样才是用户友好的。下面看看如何实现这两种效果。 

 在提交后显示验证信息当用户试图提交表单时,你可以在作用域中捕获到一个submitted值,然后对表单内容进行

7.2 表单验证 37
1

2

345678

验证并显示错误信息。

例如,修改一下前面的例子,只在用户提交表单时才显示错误信息。在ng-show指令中加入对表单是否进行了提交的检查(后面会实现这个功能):

     <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 && signup_form.name.$invalid &&signup_form.submitted">
<small class="error"

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

    Your name is required.
</small>

<small class="error"
    ng-show="signup_form.name.$error.minlength">
    Your name is required to be at least 3 characters

10

</small>
<small class="error" 11

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

                             Your name cannot be longer than 20 characters
                         </small>

                     </div>
                 </div>

</div>

             <button type="submit" >Submit</button>
         </fieldset>

</form>现在,仅当signup_form.submitted设置为true时,容纳错误信息的div才会展示出来。在

signupForm操作中实现这个行为,如下所示:

app.controller('signupController', function($scope) {$scope.submitted = false;
$scope.signupForm = function() {

if ($scope.signup_form.$valid) {// 正常提交

             } else {
                 $scope.signup_form.submitted = true;

}}

});

12
13
14
15
16
17
18

如果用户试图在有非法输入的情况下提交表单,我们现在可以捕获到这个行为并展示合适的

错误信息。在线示例:http://jsbin.com/ePomUnI/6/edit。

 在失焦后显示验证信息

如果想保留实时错误提示的体验,可以在用户从某个输入字段失焦后提示错误信息(例如用户已经不在某个特定的输入字段中时)。为了实现这个效果,需要实现一个不是很复杂的指令,并向表单中添加一个新的变量。

我们需要使用的指令是ngFocus,它是这样的:

     app.directive('ngFocus', [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="20" required ng-focus />

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

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

在线示例:http://jsbin.com/ePomUnI/7/edit。也可以在ngModel控制器中使用$isEmpty()方法来判断输入字段是否为空。当输入字段为空

这个方法会返回true,反之如果不为空则返回false。

ngMessages(1.3+)

7.2 表单验证 39
1

众所周知,表单和验证是Angular中复杂的组件之一。上面的例子不是特别好,不简洁。在Angular 1.3发布前,表单验证必须以这种方式编写。

然而在发布的Angular 1.3中,Angular核心做了一个升级。它不再需要基于一个详细的表达式状态创建元素显示或隐藏(正如我们在本章所做的那样)。 3

<form name="signup_form" novalidate ng-submit="signupForm()"ng-controller="signupController">

    <fieldset>
        <legend>Signup</legend>
        <div class="row">

4

2

<div class="large-12 columns"> 5<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name"

6

7

8

9

10

                                                      11
                                                      12
                                                      13
                                                      14
                                                      15
                                                      16
                                                      17
                                                      18

ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.

$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">

Your name is required.</small>
<small class="error" ng-show="signup_form.name.$error.minlength">

Your name is required to be at least 3 characters</small><small class="error" ng-show="signup_form.name.$error.maxlength">

                        Your name cannot be longer than 20 characters </small>
                </div>

            </div>
        </div>

        <button type="submit">Submit</button>
    </fieldset>

</form>

本质上这一功能会检查错误对象的状态发生了变化。此外,我们还得到了站点中每个表单需要的很多额外的和重复的标记。这显然不是一个理想的解决方案。

从1.3开始,Angular中新增了一个ngMessages指令。
安装安装ngMessages很简单,因为它被打包成了一个Angular模块。首先下载这个模块:

     $ bower install --save angular-messages

或者,也可以从angular.org下载该文件并将它保存到项目中。还需要将angular-messages.js这个JavaScript引入我们的主HTML中:

<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js"></script>

最后,我们还要告诉Angular将ngMessages作为应用程序的依赖模块引入,就像这样:angular.module('myApp', ['ngMessages']);

现在,我们已经安装了ngMessages,然后可以马上开始使用它了。使用前面的例子作为基础,你可以移除ng-show指令,然后使用ngMessages的一个更简洁的实现替换它。

<form name="signup_form" novalidate ng-submit="signupForm()"ng-controller="signupController"> 

<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">Make sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>

</div>

         <button type="submit">Submit</button>
     </form>

借助ngMessages,表本身比前面的实现更清洁,并且更好理解。然而对于这个实现,一次只会显示一个错误消息。如果我们想要更新这个实现同时显示所有

的错误将会怎样?很容易。只需在ng-message指令旁边使用ng-messages-multiple属性即可。

<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>
<div ng-message="required"> sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>

</div>

很多时候这些信息相互之间非常相似。我们可以将它们保存到模板中从而减少麻烦,而不是重新输入每个字段的错误信息。

     <!-- In templates/errors.html -->

<div ng-message="required">This field is required</div>
<div ng-message="minlength">The field must be at least 3 characters</div>
<div ng-message="maxlength">The field cannot be longer than 20 characters</div>

然后我们可以通过在视图中使用ng-messages-include属性引入这个模板来改进这个表单:

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

有时,你可能希望为不同的字段自定义错误信息。没问题,你可以在这个指令内简单地插入一个自定义错误信息。由于ngMessages涉及ngMessages容器中错误列表的顺序,我们可以通过在这个指令中列出自定义错误信息的方式覆盖它们。

<div class="error" ng-messages="signup_form.name.$error"ng-messages-include="templates/errors.html">
<!--
除了minlength会被覆盖之外,其他每个信息都会保持不变

--></div>

此外,甚至还可以为自定义验证创建自定义消息。可以通过修改模型的 parsers链做到这一点。

  例如,比方说我们想要创建一个自定义验证器验证用户名在一个注册表单中是否有效:

     app.directive('ensureUnipue', function($http) {
         return {

             require: 'ngModel',
             link: function(scope, ele, attrs, ctrl) {

                 ctrl.$parsers.push(function(val) {

// 在这里添加验证});

7.2 表单验证 41
1

23

4

});对于ngModel,你可以添加可以使用ngMessage指令显示/隐藏的自定义信息。还可以添加可

以使用ngMessage指令检查的带有自定义的消息的指令。例如,改变前面使用ngMessages的例子。

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"ensure-unique="/api/checkUsername.json">

         <label>
             Your name

</label>
<input type="text" placeholder="Username" name="username" ng-model="signup.username" 5ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.username.$error">

<div ng-message="required">
    Make sure you enter your username

</div>
<div ng-message="checkingAvailability">

6

Checking... 7</div>

             <div ng-message="usernameAvailablity">
                 The username has already been taken. Please choose another

             </div>
         </div>

         <button type="submit">
             Submit

         </button>
     </form>

在这中用法中,我们检查了错误信息的自定义属性。为了添加自定义错误消息,我们将会把它们应用到自定义ensureUnique指令的ngModel中。

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

return;}

                     ngModel.$setValidity('checkingAvailability', true);
                     ngModel.$setValidity('usernameAvailablity', false);

                     $http({
                         method: 'GET',

                         url: url,
                         params: {

                             username: val

8
9
10
11
12
13
14
15
16

}
}).success(function() { 17

ngModel
    .$setValidity('checkingAvailability', false);

ngModel
    .$setValidity('usernameAvailablity', true);

18 

    })['catch'](function() {
        ngModel

            .$setValidity('checkingAvailability', false);
        ngModel

            .$setValidity('usernameAvailablity', false);

});

    return val;
})

}}

});