집 >웹 프론트엔드 >JS 튜토리얼 >AngularJS가 포커스를 얻고 포커스를 잃을 때 양식 유효성 검사 기능을 구현하는 방법

AngularJS가 포커스를 얻고 포커스를 잃을 때 양식 유효성 검사 기능을 구현하는 방법

小云云원래의: 2018-01-22 10:01:561875검색

이 글에서는 주로 AngularJS에서 구현한 포커스를 얻었을 때와 포커스를 잃었을 때의 폼 확인 기능을 소개합니다. AngularJS에서 ng-blur와 ng-focus를 사용하여 폼 이벤트 관련 작업 기술을 모니터링하는 내용이 포함되어 있으니 참고하시기 바랍니다. 모두를 도울 수 있습니다.

이 문서의 예에서는 포커스를 얻고 포커스를 잃을 때 AngularJS에서 구현하는 양식 유효성 검사 기능을 설명합니다. 참고용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:

<!DOCTYPE html>
<html ng-app="formExample">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../js/angular.js"></script>
  <script>
    angular.module(&#39;formExample&#39;, [])
        .controller(&#39;FormController&#39;, [&#39;$scope&#39;, function($scope)
        {
          $scope.userType = &#39;guest&#39;;
          $scope.change = false;
        }]);
  </script>
</head>
<body>
<form name="myForm" ng-controller="FormController">
  userType: <input name="input" ng-model="userType" ng-blur="change=true" ng-focus="change=false" required>
  <span class="error" ng-show="myForm.input.$error.required && change">必填项</span><br>
</form>
</body>
</html>

작동 효과:

AngularJS가 포커스를 얻고 포커스를 잃을 때 양식 유효성 검사 기능을 구현하는 방법

관련 기사