最近，在学习angular下面就和大家分享一个简单的表单验证实例

 

在分享实例之前先整理一下，一些基础知识

input元素上使用的所有验证选项：

1必填项  <input type="text"  required/>

2最小长度 <input type="text" ng-minlength="5"/>

3最大长度 <input type="text" ng-maxlength="20"/>

4模式匹配（正则表达式）<input type="text" ng-pattern="[a-zA-z]"/>

5电子邮件（type属性） <input type="email" name ="email"/>

6数字（type属性）<input type="number" name ="age"/>

7 URL （type属性）<input type="url" name ="homepage"/>

8自定义验证（比如服务端验证用户名是否被使用）

9 在表达中的控制变量

格式如下：formName.inputFieldName.property

未修改表单

formName.inputFieldName.$pristine = true;(反之为false)

修改过表单

formName.inputFieldName.$dirty = true

合法的表单

formName.inputFieldName.$valid = true

不合法的表单

formName.inputFieldName.$invalid = true

错误--验证失败

formName.inputFieldName.$error= true

有个这些基本知识后，下面给大家展示，表单验证的实例

SignUp.html

     
       
      
              body{         background-color: #fff;         border-top: 5px solid #3399cc;       }       html{         background: #fff;       }       .row{         border: 0px solid green;       }       input.ng-invalid{         border: 1px solid red;       }       input.ng-valid{         border: 1px solid green;       }  
       
           
        
          
         
              
          Signup    
          
                 
           
                    
                    
                  
            
                     
             
                             Your name is required.                
              
                              Your name is required to be atleast 3 characters                
               
                               Your name cannot be longer than20 characters                            
                
                       
                 
                          
                          
                          
                  
                             
                   
                                     Your email is required.                    
                    
                                      Your email is required to be atleast 3 characters                    
                     
                                       That is not a valid email.Please input a valid email.                    
                      
                                        Your email cannot be longerthan 20 characters                                
                       
                              
                                
                              
                        
                                 
                         
                                         Please input a username                
                          
                                          Your username is required to be at least 3characters                
                           
                                           Your username cannot be longerthan 20 characters                
                            
                                            That username is taken, pleasetry another                      
                             
                              Submit 
                             
                            
                           
                          
                         
                        
                       
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
         
             

angularScript.js

angular.module('myApp', []).directive('ensureUnique',['$http', function($http) { return {    require: 'ngModel',    link: function(scope, ele, attrs, c) {      scope.$watch(attrs.ngModel, function() {        $http({          method: 'POST',          url: '/api/check/' +attrs.ensureUnique,          data: {'field': attrs.ensureUnique}        }).success(function(data, status,headers, cfg) {          c.$setValidity('unique',data.isUnique);        }).error(function(data, status,headers, cfg) {          c.$setValidity('unique', false);        });      });    } };}]).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;});      });    } }}]).controller('signupController',['$scope', function($scope) { $scope.submitted = false; $scope.signupForm = function() {    if ($scope.signup_form.$valid) {      // Submit as normal    } else {      $scope.signup_form.submitted = true;    } }}]);

下面是