構建一個ng表單
1.確保form上標籤有一個name屬性，像下面的例子一樣。最好再加一個novalidate=”novalidate”
2.form中不能有action屬性。提交交由ng-submit處理
3.每個input一定要有ng-model，最好有一個name方便引用。然後用require或者ng-minlength之類才起作用
<form name="form" novalidate="novalidate">
<label name="email">Your email</label>
<input type="email" name="email" ng-model="email" placeholder="Email Address" />
</form>
ng預設提供了驗證
驗證是否已輸入文字，只需在標籤上加上required：
<input type="text" ng-model="user.name" required />
驗證至少輸入{number}個字元，使用指令ng-minlength=“{number}”：
<input type="text" ng-model="user.name" ng-minlength="5" />
驗證至多輸入{number}個字元，使用指令ng-maxlength=“{number}”：
<input type="text" ng-model="user.name" ng-maxlength="20" />
確保輸入匹配一個Regex，使用指令ng-pattern="/PATTERN/":
<input type="text" ng-model="user.name" ng-pattern="/a-zA-Z/" />
驗證輸入是一個Email，設定input的type屬性為email：
<input type="email" name="email" ng-model="user.email" />
驗證輸入是一個數字，設定input的type屬性為number：
<input type="number" name="number" ng-model="user.age" />
驗證輸入是一個URL，設定input的type屬性為url
<input type="url" name="homepage" ng-model="user.weburl" />
實戰一個例子（需要驗證一個email為發須並且最小為10，最長為20，並且並須要含有m字元。沒有實際意義，只是示範例子）
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form name="form" novalidate="novalidate">
<input type="email" ng-model="user.email" ng-minlength="5" ng-maxlength="20" ng-pattern="/m.*/" required/>
<input type="submit" value="確定"/>
</form>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
運行這個例子先啥都不做，查看元素
注意看這些標出來的東西有點意思。然後輸入字元就能看到他們的進行變化。然後我來解釋一下這些東西。（可以看到一開始required就為ng-invalid-required。但其他的都為valid）
驗證的時候感覺好像出現一個bug.具體如下：（如有知道的請協助一下解釋一下這個問題）
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form name="form" novalidate="novalidate">
<input type="email" ng-model="user.email" ng-minlength="5" ng-maxlength="20" ng-pattern="/m.*/" required/>
<input type="email" ng-model="user.email2" required/>
<input type="submit" value="確定"/>
</form>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
第一個例子的email居然ng-valid-email。感覺有點問題。難道是用了type=”email”之類就不能用ng-minlength ng-pattern之類了嗎？覺得可能是ng版本問題，但換了低版本之後發現同樣有問題。希望有人能解釋一下這個問題。github有這個問題 https://github.com/angular/angular.js/issues/7849 而且email驗證的時候github上有人提出了其他問題，https://github.com/angular/angular.js/issues/5899，看來對於type=”email”和 url之類要使用的時候多注意，我的建議是盡量不用。如果需要請寫自訂驗證。下面我會介紹，確實是有夠蛋疼之處。由於這種問題，所以我寫的表單不會出現type=”email” type=”url” type=”number”之類，如果ng解決了這個問題。我再進行更新。
表單的狀態
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<form name="form">
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="20"/>
<input type="text" name="email" ng-model="user.email" required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
</form>
{{ a }}
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
</script>
</body>
</html>
我們把焦點只聚積到表單（class有如下屬性ng-pristine ng-invalid ng-invalid-required）,如果變動在第一個輸入框中輸入s,現在class就變了ng-invalid ng-invalid-required ng-dirty ng-invalid-minlength
現在需要解釋一些東西了
AngularJS將DOM驗證的結果儲存在$scope對象中。這使我們能夠即時做出一些處理。提供給我們的屬性有：
$pristine表示使用者是否修改了表單。如果為ture，表示沒有修改過：
formName.$pristine;
$dirty當且使用者是否已經修改過表單：
formName.$dirty
我們來直觀的看下
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<div ng-controller="testController">
<form name="form">
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="20"/>
<input type="text" name="email" ng-model="user.email" required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
</form>
<button ng-click="getFormStatus()">查看錶單狀態</button>
</div>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function($scope){
$scope.getFormStatus = function(){
console.log($scope.form);
}
})
</script>
</body>
</html>
如果表單進行變動的時候，可以看到表單的一些屬性進行了即時的變化。觀察上面四個，你不難發現。$dirty和$valid是相反的，一個true，一個false或者一個false一個true,同樣$valid，是得到現在是否通過驗證的和$invalid也是相反的。
表單的部分說的差不多了，然後說表單中的每項的東西
可以看到每個表單項也有跟表單有些共同的屬性，注意一下$error對象，記錄了是哪個出現錯誤正確的。
實戰簡單一實例
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>表單</title>
<style>
/*在修改的表單項上才顯示錯誤資訊*/
input.ng-dirty.ng-invalid {
border: 1px solid red;
}
</style>
</head>
<body>
<div ng-controller="testController">
<form name="form" ng-submit="save()" novalidate="novalidate">
<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="20"/>
<span class="error" ng-show="form.$dirty && form.name.$invalid">填寫不正確</span>
<br />
<input type="text" name="email" ng-model="user.email" required
ng-pattern="/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/"/>
<span class="error" ng-show="form.$dirty && form.name.$invalid">填寫格式錯誤</span>
<br />
<input type="submit" value="提交"/>
</form>
</div>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.8/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('testController', function($scope){
$scope.save = function () {
//擷取到表單是否驗證通過
if($scope.form.$valid){
alert('通過驗證可以提交表單');
}else{
alert('表單沒有通過驗證');
}
}
})
</script>
</body>
</html>
顯示效果如圖，當然有人有疑問了，比如第一個表單項，我不想提示填寫不正確這麼模糊的說法，而是告訴他是不是因為他沒有填寫，或者是因為他字元不夠，或者是因為你超過了最大字元。這也非常好辦，還記的$error嗎？可以通過form.name.$error.minlength之類的得到啊。明白了不。還是不明白，好吧，再給逗逼做個代碼執行個體
也許你稍為有些思路了。但還是很多時候力不從心，比如哥想自訂驗證或者通過後台驗證unique呢？再比如他這個一邊輸入一邊就提示效果太他媽差了。我想在提交時提示或者我想在滑鼠不在這個焦點的時候再提示。OK，也許你還有很多想法，但上篇已經結束了，容我整理思路，帶來表單驗證中篇。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
