AngularJS 학습용 노트의 양식 검증 기능 인스턴스 상세 정보

본고는 AngularJS 학습노트의 양식 검증 기능을 실례로 다루고 있다.다음과 같이 여러분에게 참고할 수 있도록 공유합니다.
1. 기본적인 폼 검증을 실행한다

  
    
    
    
    
    
    
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    
  
  
    

      

        

          

            Name:
            
          
          

            Email:
            
          
          

            
              
              I agree to the terms and conditions
            
          
          OK
        
        

          message:{{message}}
          

            valid:{{myForm.$valid}}
          
        
      
    
  

상기 예에서 이 HTML 문서가 브라우저에 불러올 때의 초기 상태는 세 개의 input 요소와 비활성화되고 클릭할 수 없는 ok 단추가 있습니다. 텍스트 상자에 값을 입력하고 체크 상자를 선택하면 단추를 사용할 수 있게 되어 사용자가 폼을 제출할 수 있도록 합니다.
1. 양식 요소 추가
(1) 우선 form에name 속성을 설정해야 합니다. (2) 폼에 novalidate 속성을 추가해야 합니다. 이 속성은 브라우저에 폼을 스스로 검사하지 말라고 알려 줍니다. 이로써 AngularJS가 방해받지 않는 작업을 허용합니다. (3)ng-submit 명령은 폼 제출 이벤트에 대해 사용자 정의 응답 행위를 지정하고 사용자가 폼을 제출할 때 터치합니다
2. 검증 속성 사용
(1) 검증하고 싶은 각 요소에name 속성을 추가합니다. 그러면 Angularjs가 제공하는 각종 특수한 변수에 접근할 수 있습니다. (2) type 속성을 설정합니다. 이 속성은 input 요소가 수신할 데이터 형식을 지정합니다. 이 형식들은angularjs가 어떤 검사를 필요로 하는지 알려줍니다. (3) required 속성을 지정합니다.이 속성은 사용자가 검사를 기다리는 폼에 입력 값을 제공해야 한다는 것을 지정합니다. (4) 이 예에서 input 요소는ng-model 명령을 사용하여 은밀하게 정의된 newUser 대상의 속성을 설정합니다.
3. 모니터링 양식의 유효성
AngularJS에서 표준 폼 요소를 대체하는 명령은 폼의 각 요소나 전체 폼의 유효성 상태를 검사하는 데 사용할 특수한 변수를 정의합니다.
$pristine: 사용자가 요소/폼과 상호작용을 하지 않으면true $dirty를 되돌려줍니다. 사용자가 요소/폼과 상호작용을 한 경우true $valid를 되돌려줍니다. 요소/폼 내용의 검사 결과가 유효할 때true $invalid를 되돌려줍니다. 요소/폼 내용의 검사 결과가 무효일 때true $error를 되돌려줍니다. 검사 오류에 대한 자세한 정보를 제공합니다.
2. 양식 검사 피드백 정보 제공
위의 예에서 보여준 효과는 비교적 간단합니다. ok 단추는 모든 input 요소가 사용할 수 있을 때까지 사용되지 않습니다. 사용자가 잘못된 형식이나 채워지지 않은 데이터를 입력하지 못하게 합니다.다음은 AngularJS가 실시간 검증 정보를 보고하는 것을 보여 드리겠습니다.
1. css를 사용하여 검사 피드백 정보 제공
ng-pristine: 사용자가 상호작용을 하지 않은 요소가 이 클래스에 추가됨ng-dirty: 사용자가 상호작용을 한 요소가 이 클래스에 추가됨ng-valid: 검사 결과는 유효한 요소입니다. 이 클래스에서ng-invalid: 검사 결과는 무효한 요소입니다.
다음은 구체적인 사용법을 살펴보겠습니다.

  
    
    
    
    
    
    
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    
    
  
  
    

      

        

          

            Name:
            
          
          

            Email:
            
          
          

            
              
              I agree to the terms and conditions
            
          
          OK
        
        

          message:{{message}}
          

            valid:
            
              {{myForm.$valid}}
            
          
        
      
    
  

상술한 예에서 우리는 네 가지 스타일을 정의했다. 첫 번째 두 가지 스타일은ng-dirty류 구성원에 속하는 요소를 선택하는 데 사용되고 사용자와 상호작용을 한 후에 해당하는 요소에만 적용된다.내용이 유효한 요소는ng-valid류의 구성원으로 연두색 배경으로 렌더링되고, 내용이 유효하지 않은 요소는ng-invalid류의 구성원으로 연분홍색 배경으로 렌더링됩니다.
2. 특수 변수를 사용하여 피드백 정보를 제공한다

  
    
    
    
    
    
    
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
      });
    
    
  
  
    

      

        

          

            Email:
            
            

              
                please enter a valid email address
              
              
                please enter a value
              
            
          
          OK
        
      
    
  

이 예에서 새로운 div 요소를 추가하여 사용자에게 검사 알림 정보를 표시하는 데 사용합니다. 새로운 div 요소의 가시성은ng-show 명령에 의해 제어되고 input 요소에 값이 입력되며 입력 값이 검사를 통과하지 않을 때 이 요소를 표시합니다.이것은 form 요소의name 값과 input의name 값을 연합하여 input 요소에 접근하는 것입니다.이 예에서, 우리는 사용자 체험을 강화하기 위해 특수 검사 변수와 다른 명령을 연합하여 사용한다.그러나 이렇게 하면 페이지에 같은 불필요한 정보의 요소를 대량으로 증가시킬 수 있다. 다음에 우리는 간소화할 것이다

  
    
    
    
    
    
    
      angular.module('exampleApp',[])
      .controller('defaultCtrl',function($scope){
        $scope.addUser=function(userDetails){
          $scope.message=userDetails.name+"("+userDetails.email+")("+userDetails.agreed+")"
        }
        $scope.message='Ready';
        $scope.getError=function(error){
          if(angular.isDefined(error)){
            if(error.required){
              return 'please enter a value';
            }else if(error.email){
              return 'please enter a valid email address';
            }
          }
        }
      });
    
    
  
  
    

      

        

          

            Email:
            
            

              {{getError(myForm.userEmail.$error)}}
            
          
          OK
        
      
    
  

더 많은 AngularJS 관련 내용에 관심이 있는 독자들은 본 사이트의 주제를 볼 수 있습니다:, 및 AngularJS MVC 구조 요약
본 논문이 여러분의 AngularJS 프로그래밍에 도움이 되기를 바랍니다.