簡話Angular 05 Angular表單驗證

一句話: 能夠使用全部html5表單驗證功能,同時Angular還加強了部分驗證,支持動態驗證

 

1. 上源碼

 1 <div ng-controller="ExampleController">
 2         <form action="" name="exampleForm">
 3             <label>姓名(required ng-minlength=1 ng-maxlength=3): </label> <input type="text" name="name" ng-model="user.name" required ng-minlength=1 ng-maxlength=3> <br>
 4             <label>英文名(ng-pattern="/[a-zA-Z]/"): </label> <input type="text" name="englishName" ng-model="user.englishName" ng-pattern="/[a-zA-Z]/"> <br>
 5             <label>年齡(number): </label> <input type="number" name="age" ng-model="user.age" required > <br>
 6             <label>郵件(email): </label> <input type="email" name="email" ng-model="user.email" /> <br>
 7             <label>博客地地址(url): </label> <input type="url" name="homepage" ng-model="user.homepage" /> <br>
 8 
 9             <input type="submit" value="提交" />
10         </form>
11 
12         <script>
13         var  myApp = angular.module('myApp', []);
14         myApp.controller('ExampleController', function($scope) {
15             $scope.global = {};
16             $scope.global.fDate = new Date();
17 
18             $scope.isCapitalized = function(str) {
19                 return str[0] == str[0].toUpperCase();
20             };
21 
22         });
23         </script>        
24     </div>

 

2. 在線查看運行效果

http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/5-form-validation.html

 

3. 項目地址

github: https://github.com/jimuyouyou/angular-bootstrap-rest-seed