表單驗證
若是想要屏蔽瀏覽器對錶單的默認驗證行爲，能夠在表單元素上添加novalidate標記。
下面看一下能夠在input元素上使用的全部驗證選項。javascript
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：html
<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. 自定義驗證
在AngularJS中自定義指令是很是容易的。鑑於目前尚未介紹到指令的相關內容，第10章
再深刻研究如何建立自定義驗證。目前先來看一下如何經過向後端服務器發送請求，並經過響應
的結果來將輸入字段設置爲合法或不合法，以確保輸入字段中的內容是惟一的。
9. 在表單中控制變量
表單的屬性能夠在其所屬的$scope對象中訪問到，而咱們又能夠訪問$scope對象，所以
JavaScript能夠間接地訪問DOM中的表單屬性。藉助這些屬性，咱們能夠對錶單作出實時（和
AngularJS中其餘東西同樣）響應。這些屬性包括下面這些。
（注意，可使用下面的格式訪問這些屬性。）
formName.inputFieldName.propertyjava
未修改的表單
這是一個布爾屬性，用來判斷用戶是否修改了表單。若是未修改，值爲true，若是修改過值
爲false：
formName.inputFieldName.$pristine
修改過的表單
只要用戶修改過表單，不管輸入是否經過驗證，該值都返回true：
formName.inputFieldName.$dirty
合法的表單
這個布爾型的屬性用來判斷表單的內容是否合法。若是當前表單內容是合法的，下面屬性的
值就是true：
formName.inputFieldName.$valid
不合法的表單
這個布爾屬性用來判斷表單的內容是否不合法。若是當前表單內容是不合法的，下面屬性的
值爲true：
formName.inputFieldName.$invalid
錯誤
這是AngularJS提供的另一個很是有用的屬性：$error對象。它包含當前表單的全部驗證
內容，以及它們是否合法的信息。用下面的語法訪問這個屬性：
formName.inputfieldName.$errorjquery
若是驗證失敗，這個屬性的值爲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;
}正則表達式
表單實例html代碼以下bootstrap
1 <!DOCTYPE html> 2 <html ng-app = "myApp"> 3 <head> 4 <title>Simple app</title> 5 </head> 6 <body> 7 <form name = "signup_form" novalidate-submit = "signupForm()"> 8 <fieldset> 9 <legend>Signup</legend> 10 11 <div class = "row"> 12 <div class = "large-12 columns"> 13 <label>Your name</label> 14 <input type = "text" placeholder="Name" name = "name" ng-model = "signup.name" ng-minlength = 3 ng-maxlength = 20 required /> 15 <!-- 對輸入進行實時驗證，若對輸入進行過更改且輸入不合格則實時進行錯誤顯示--> 16 <div class = "error" ng-show = "signup_form.name.$dirty && signup_form.name.$invalid"> 17 <small class = "error" ng-show = "signup_form.name.$error.required">Your name is required.</small> 18 <small class = "error" ng-show = "signup_form.name.$error.minlength">Your name is required to be at least 3 characters</small> 19 <small class = "error" ng-show = "signup_form.name.$error.maxlength">Your name can't be longer than 20 characters</small> 20 </div> 21 </div> 22 </div> 23 24 <div class = "row"> 25 <div class = "large-12 columns"> 26 <label>Your email</label> 27 <input type="email" placeholder="Email" name = "email" ng-model = "signup.email" ng-minlength = 3 ng-maxlength = 20 required /> 28 <div class = "error" ng-show = "signup_form.email.$dirty && signup_form.email.$invalid"> 29 <small class = "error" ng-show = "signup_form.email.$error.required">Your email is required.</small> 30 <small class = "error" ng-show = "signup_form.email.$error.minlength">Your email is required to be at least 3 characters</small> 31 <small class = "error" ng-show = "signup_form.email.$error.email">That is not a valid email.Please input a valid email.</small> 32 <small class = "error" ng-show = "signup_form.email.$error.maxlength">Your email can't be longer than 20 characters</small> 33 </div> 34 </div> 35 </div> 36 37 <div class = "large-12 columns"> 38 <label>Username</label> 39 <input type = "text" placeholder="Desired username" name = "username" ng-model = "signup.username" ng-minlength = 3 ng-maxlength = 20 ensure-unique = "username" required /> 40 <div class = "error" ng-show = "signup_form.name.$dirty && signup_form.name.$invalid"> 41 <small class = "error" ng-show = "signup_form.username.$error.required">Please input a username.</small> 42 <small class = "error" ng-show = "signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small> 43 <small class = "error" ng-show = "signup_form.username.$error.maxlength">Your username can't be longer than 20 characters</small> 44 <small class = "error" ng-show = "signup_form.username.$error.unique">That username is taken, please try another</small> 45 </div> 46 </div> 47 48 <button type = "submit" class = "button radius" ng-disabled = "signup_form.$invalid">Submit</button> 49 </fieldset> 50 </form> 51 <script type="text/javascript" src = "js/jquery.min.js"></script> 52 <script type="text/javascript" src = "js/bootstrap.min.js"></script> 53 <script type="text/javascript" src = "js/angular.js"></script> 54 <script type="text/javascript" src = "js/app.js"> 55 </script> 56 </body> 57 </html>
js代碼以下後端
1 var myApp = angular.module('myApp', []); 2 myApp.directive('ensureUnique', ['$http', function($http) { 3 return { 4 require: 'ngModel', 5 link: function(scope, ele, attrs, c) { 6 scope.$watch(attrs.ngModel, function() { 7 $http({ 8 method: 'POST', 9 url: '/api/check/' + attrs.ensureUnique, 10 data: {'field': attrs.ensureUnique} 11 }).success(function(data, status, headers, cfg) { 12 c.$setValidity('unique', data.isUnique); 13 }).error(function(data, status, headers, cfg) { 14 c.$setValidity('unique', false); 15 }); 16 }); 17 } 18 }; 19 }]);
在提交後顯示驗證信息
當用戶試圖提交表單時，你能夠在做用域中捕獲到一個submitted值，而後對錶單內容進行
驗證並顯示錯誤信息。
例如，修改一下前面的例子，只在用戶提交表單時才顯示錯誤信息。在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">api
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>
如今，僅當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;
}
}
});瀏覽器
在失焦後顯示驗證信息
若是想保留實時錯誤提示的體驗，能夠在用戶從某個輸入字段失焦後提示錯誤信息（例如用
戶已經不在某個特定的輸入字段中時）。爲了實現這個效果，須要實現一個不是很複雜的指令，
並向表單中添加一個新的變量。
咱們須要使用的指令是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。
-
每一个你不满意的现在，都有一个你没有努力的曾经。