快捷導(dǎo)航

AngularJs實(shí)現(xiàn)ng1.3+表單驗(yàn)證

更新時(shí)間：2015年12月10日 10:49:32 作者：Halower

這篇文章主要介紹了AngularJs實(shí)現(xiàn)ng1.3+表單驗(yàn)證，感興趣的小伙伴們可以參考一下

前一篇文章詳解AngularJS實(shí)現(xiàn)表單驗(yàn)證說過，ng1.3+以后對(duì)于表單驗(yàn)證有了優(yōu)化，它不再需要一個(gè)詳細(xì)的表達(dá)式狀態(tài)創(chuàng)建元素顯示或隱藏。

例如：我們?cè)趎g1.3之前的版本都需要如下寫法：

復(fù)制代碼代碼如下:

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

ng1.3之后新增了一個(gè)ngMessages指令，他被打包成一個(gè)模塊發(fā)布，因此我們使用的時(shí)候只需要將這個(gè)依賴模塊引入即可

復(fù)制代碼代碼如下:

angular.module('myApp', ['ngMessages']);

怎么用？

現(xiàn)在我們學(xué)習(xí)一下，它的用法，Code如下：

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用戶名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages測(cè)試" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error：{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填項(xiàng)</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太長(zhǎng)大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

效果如下：

可以看出，其實(shí)ng是通過$error來(lái)監(jiān)視模型的變化，因?yàn)?error中包含了錯(cuò)誤的詳細(xì)信息，同時(shí)，如果我們的應(yīng)用場(chǎng)景中如果同時(shí)，有好幾處錯(cuò)誤，那么，上面代碼按照ng-message的順序只會(huì)顯示一條錯(cuò)誤信息，如果我們需要全部顯示出來(lái)只需要添加 ng-messages-multiple

<input type="text" placeholder="測(cè)試" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填項(xiàng)</div>
<div ng-message="email">郵件格式不對(duì)</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太長(zhǎng)大于20</div>
</div>

效果如下：

怎么復(fù)用？

我們的驗(yàn)證信息在一個(gè)項(xiàng)目中大多是通用性很高的（對(duì)于樣式，描述等都有高度的統(tǒng)一性），因此我們這里也會(huì)考慮到復(fù)用，ng中同樣提供了解決方案

就是將其作為模板，指定請(qǐng)求路徑由ng自動(dòng)添加。這里再介紹一個(gè)指令 ng-messages-include

我們將上面的驗(yàn)證信息保存到一個(gè)獨(dú)立的html靜態(tài)頁(yè)面中，然后使用ng-messages-include指定請(qǐng)求路徑即可。

Code:

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

error.html

<div ng-message="required">必填項(xiàng)</div>
<div ng-message="email">郵件格式不對(duì)</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太長(zhǎng)大于20</div>

效果如下：

當(dāng)然，模板可能在特殊的時(shí)期某些字段錯(cuò)誤提示不能滿足你的要求，你可以添加自定義的提示如下：

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的順序依次覆蓋
--> 
</div>

自定義驗(yàn)證(指令)涉及到的細(xì)節(jié)知識(shí)點(diǎn)很多，如果簡(jiǎn)單地為了用而用，可能寫得出功能，但是代碼丑陋，太菜了，還需要花個(gè)把月方能弄懂點(diǎn)皮毛，這部分暫告一段落，等徹底明白了，在大家分享，大家亦可以結(jié)合《理解AngularJs指令》進(jìn)行學(xué)習(xí)。

您可能感興趣的文章: