ng1.3+表單驗證

時間 2019-11-06

標籤 ng1.3 表單驗證欄目 HTML 简体版

原文原文鏈接

前一篇文章說過，ng1.3+之後對於表單驗證有了優化，它再也不須要一個詳細的表達式狀態建立元素顯示或隱藏。javascript

例如：咱們在ng1.3以前的版本都須要以下寫法：css

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

ng1.3以後新增了一個ngMessages指令，他被打包成一個模塊發佈，所以咱們使用的時候只須要將這個依賴模塊引入便可html

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

怎麼用？

如今咱們學習一下，它的用法，Code以下：java

<!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測試" 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">必填項</div>
                            <div ng-message="minlength">字符過短小於3</div>
                            <div ng-message="maxlength">字符太長大於20</div>
                        </div> 
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
<script type="text/javascript">
     angular.module("myTest", ['ngMessages']);
</script>

效果以下：bootstrap

能夠看出，其實ng是經過$error來監視模型的變化，由於$error中包含了錯誤的詳細信息，同時，若是咱們的應用場景中若是同時，有好幾處錯誤，那麼，上面代碼按照ng-message的順序只會顯示一條錯誤信息，若是咱們須要所有顯示出來只須要添加 ng-messages-multipleapp

 <input type="text" placeholder="測試" 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">必填項</div>
    <div ng-message="email">郵件格式不對</div>
    <div ng-message="minlength">字符過短小於3</div>
    <div ng-message="maxlength">字符太長大於20</div>
</div>

效果以下：學習

怎麼複用？

咱們的驗證信息在一個項目中大可能是通用性很高的（對於樣式，描述等都有高度的統一性），所以咱們這裏也會考慮到複用，ng中一樣提供瞭解決方案測試

就是將其做爲模板，指定請求路徑由ng自動添加。這裏再介紹一個指令 ng-messages-include優化

咱們將上面的驗證信息保存到一個獨立的html靜態頁面中，而後使用ng-messages-include指定請求路徑便可。ui

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">必填項</div>
<div ng-message="email">郵件格式不對</div>
<div ng-message="minlength">字符過短小於3</div>
<div ng-message="maxlength">字符太長大於20</div>

效果以下：

固然，模板可能在特殊的時期某些字段錯誤提示不能知足你的要求，你能夠添加自定義的提示以下：

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

　　　　　自定義驗證(指令)涉及到的細節知識點不少，若是簡單地爲了用而用，可能寫得出功能，可是代碼醜陋，太菜了，還須要花個把月方能弄懂點皮毛，這部分暫告一段落，等完全明白了，在你們分享，以後會對指令，服務先行學習下...

　　　　備註：我也是剛剛開始學習，若是你喜歡本文的話，推薦共勉，謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。