최신 웹 개발 튜토리얼
 

AngularJS양식 유효성 검사

❮ 이전 다음 장 ❯

AngularJS와 입력 데이터의 유효성을 검사 할 수 있습니다.

양식 유효성 검사

AngularJS와 클라이언트 측 폼 유효성 검사를 제공합니다.

AngularJS와 양식 및 입력 필드 (입력, 텍스트 영역, 선택)의 상태를 모니터링하고 현재 상태에 대해 사용자에게 통지 할 수 있습니다.

AngularJS와는 또한 터치 또는 수정 여부되었는지 여부에 대한 정보를 보유하고 있습니다.

당신은 표준 HTML5 입력의 유효성을 검사하는 속성을 사용하거나 자신의 유효성 검사 기능을 할 수 있습니다.

노트 클라이언트 측 유효성 검사 할 수있는 혼자가 보안 사용자 입력. 서버 측 유효성 검사도 필요하다.

필수

HTML5의 속성을 사용하여 required 입력 필드가 작성해야한다고 지정을 :

예

입력 필드가 필요합니다 :

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
»그것을 자신을 시도

이메일

HTML5의 유형 사용하여 email 값이 전자 메일 있어야한다는 지정할 수 :

예

입력 필드는 전자 메일 수 있습니다

<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
»그것을 자신을 시도

양식 상태 및 입력 상태

AngularJS와 끊임없이 형태와 입력 필드 모두의 상태를 갱신한다.

입력 필드는 다음과 같은 상태를 가지고 :

  • $untouched 분야는 아직 접촉되지 않았습니다
  • $touched 필드 터치 한
  • $pristine 분야는 아직 수정되지 않았습니다
  • $dirty 필드가 수정되었습니다
  • $invalid 필드의 내용이 유효하지 않습니다
  • $valid 필드 내용이 유효

그들은 입력 필드의 모든 속성, 그리고 중 하나입니다 true 또는 false .

양식은 다음과 같은 상태를 가지고 :

  • $pristine 없음 필드는 아직 수정되지 않았다
  • $dirty 하나 이상의 수정 된
  • $invalid 양식의 내용이 유효하지 않습니다
  • $valid 양식의 내용이 유효
  • $submitted 양식 제출

그들은 양식의 모든 속성, 그리고 중 하나입니다 true 또는 false .

당신은 사용자에게 의미있는 메시지를 보여주기 위해 이러한 상태를 사용할 수 있습니다. 필드가 필요하며, 사용자가 비워 둡니다 경우는, 사용자에게 경고를한다 :

예

필드가 감동과 비어 된 경우 오류 메시지가 표시 :

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
»그것을 자신을 시도

CSS 클래스

AngularJS와 자신의 상태에 따라 양식과 입력 필드에 CSS 클래스를 추가합니다.

다음 클래스에 추가하거나, 입력 필드에서 제거됩니다 :

  • ng-untouched 필드가 아직 접촉되지 않았습니다
  • ng-touched 필드 터치 한
  • ng-pristine 분야는 아직 수정되지 않았습니다
  • ng-dirty 필드가 수정되었습니다
  • ng-valid 필드 내용이 유효
  • ng-invalid 필드의 내용이 유효하지 않습니다
  • ng-valid- key 각각의 검증을위한 하나의 키를. 예 : ng-valid-required 유용한 하나 이상의 일이있을 때 확인해야하는
  • ng-invalid- key 예 : ng-invalid-required

다음 클래스는 폼에서 추가 또는 제거 :

  • ng-pristine 어떤 필드는 아직 수정되지 않았다
  • ng-dirty 하나 이상의 필드가 수정되었는지
  • ng-valid 형태의 콘텐츠는 유효
  • ng-invalid 양식의 내용이 유효하지 않습니다
  • ng-valid- key 각각의 검증을위한 하나의 키를. 예 : ng-valid-required 유용한 하나 이상의 일이있을 때 확인해야하는
  • ng-invalid- key 예 : ng-invalid-required

이 나타내는 값이면 클래스는 제거 false .

응용 프로그램을 더 나은 더 직관적 인 사용자 인터페이스를 제공하기 위해 이러한 클래스의 스타일을 추가합니다.

예

표준 CSS를 사용하여 스타일을 적용합니다 :

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
»그것을 자신을 시도

양식은 스타일 수 있습니다 :

예

수정되지 않은 (원시) 양식, 수정 된 형태의 스타일을 적용합니다 :

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
»그것을 자신을 시도

사용자 지정 유효성 검사

자신의 유효성 검사 기능을 만들려면 조금 더 까다 롭습니다. 당신은 당신의 응용 프로그램에 새 지시문을 추가, 특정 지정된 인수로 함수 내부의 유효성 검사를 처리해야합니다.

예

사용자 지정 유효성 검사 기능을 포함, 자신의 지시문을 작성하고 사용하여 참조 my-directive .

값이 "E"문자가 포함 된 경우 필드에만 유효합니다 :

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, mCtrl) {
      function myValidation(value) {
        if (value.indexOf("e") > -1) {
          mCtrl.$setValidity('charE', true);
        } else {
          mCtrl.$setValidity('charE', false);
        }
        return value;
      }
      mCtrl.$parsers.push(myValidation);
    }
  };
});
</script>
»그것을 자신을 시도

예 설명 :

HTML, 새로운 지시자 속성을 사용하여 언급 될 것이다 my-directive .

자바 스크립트에서 우리라는 이름의 새로운 지침 추가하여 시작 myDirective .

지시문 이름을 지정할 때, 당신은 낙타의 경우 이름을 사용해야합니다 기억 myDirective 하지만를 호출 할 때, 당신은 사용해야합니다 - 분리 이름, my-directive .

우리가 필요로 지정할 경우 그런 다음 객체를 반환 ngModel ngModelController입니다.

네 번째 인수, 일부 인수 취하는 연결 기능 확인 mCtrl 의이다 ngModelController ,

이어서이 경우라는 함수를 지정 myValidation 하나의 인자를,이 인수는 입력 요소의 값이다.

시험 값은 문자 "E"를 포함하고, 하나에 모델 제어기의 유효성을 설정하면 true 또는 false .

마지막으로, mCtrl.$parsers.push(myValidation); 추가됩니다 myValidation 때마다 입력 값 변경이 실행됩니다 다른 기능의 배열로 기능합니다.

검증 예

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '[email protected]';
});
</script>

</body>
</html>
»그것을 자신을 시도
노트 되는 HTML 양식 속성 NOVALIDATE는 기본 브라우저 유효성 검사를하지 않도록하는 데 사용됩니다.

예 설명

AngularJS와 지시어 NG-모델은 모델에 입력 요소를 결합한다.

사용자 이메일 : 모델 객체는 두 가지 속성이 있습니다.

때문에 NG 쇼의, 컬러 스팬 : 사용자 또는 이메일 더럽고 $ 무효 $ 때 빨간색 만 표시됩니다.


❮ 이전 다음 장 ❯