AngularJs實現(xiàn)ng1.3+表單驗證
前一篇文章詳解AngularJS實現(xiàn)表單驗證說過，ng1.3+以后對于表單驗證有了優(yōu)化，它不再需要一個詳細的表達式狀態(tài)創(chuàng)建元素顯示或隱藏。
例如：我們在ng1.3之前的版本都需要如下寫法：
ng1.3之后新增了一個ngMessages指令，他被打包成一個模塊發(fā)布，因此我們使用的時候只需要將這個依賴模塊引入即可
怎么用？
現(xiàn)在我們學習一下，它的用法，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測試" 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>
效果如下：
可以看出，其實ng是通過$error來監(jiān)視模型的變化，因為$error中包含了錯誤的詳細信息，同時，如果我們的應(yīng)用場景中如果同時，有好幾處錯誤，那么，上面代碼按照ng-message的順序只會顯示一條錯誤信息，如果我們需要全部顯示出來只需要添加 ng-messages-multiple
<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>
效果如下：
怎么復用？
我們的驗證信息在一個項目中大多是通用性很高的（對于樣式，描述等都有高度的統(tǒng)一性），因此我們這里也會考慮到復用，ng中同樣提供了解決方案
就是將其作為模板，指定請求路徑由ng自動添加。這里再介紹一個指令 ng-messages-include
我們將上面的驗證信息保存到一個獨立的html靜態(tài)頁面中，然后使用ng-messages-include指定請求路徑即可。
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>
自定義驗證(指令)涉及到的細節(jié)知識點很多，如果簡單地為了用而用，可能寫得出功能，但是代碼丑陋，太菜了，還需要花個把月方能弄懂點皮毛，這部分暫告一段落，等徹底明白了，在大家分享，大家亦可以結(jié)合《理解AngularJs指令》進行學習。
相關(guān)文章
angularJs使用ng-repeat遍歷后選中某一個的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了angular使用post、get向后臺傳參的問題實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Angular短信模板校驗代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)
這篇文章主要介紹了詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Angular2 Service實現(xiàn)簡單音樂播放器服務(wù)
本篇文章主要介紹了Angular2 Service實現(xiàn)簡單音樂播放器服務(wù) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
AngularJS select設(shè)置默認值的實現(xiàn)方法
這篇文章主要介紹了AngularJS select設(shè)置默認值的實現(xiàn)方法的相關(guān)資料,這里提供實現(xiàn)方法幫助大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-08-08
Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析
這篇文章主要為大家介紹了Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。所以我做了一些工作（你也可以覺得是小花招）來讓瀏覽器做我想要的事。2014-12-12
Angularjs 根據(jù)一個select的值去設(shè)置另一個select的值方法
今天小編就為大家分享一篇Angularjs 根據(jù)一個select的值去設(shè)置另一個select的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08