HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

AngularJS 양식 유효성 검사

❮ 이전의 다음 ❯

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

양식 유효성 검사

AngularJS는 클라이언트 측 양식 유효성 검사를 제공합니다.

AngularJS는 양식 및 입력 필드(input, textarea, select)의 상태를 모니터링하고 현재 상태를 사용자에게 알릴 수 있습니다.

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.

JavaScript에서 라는 새 지시문을 추가하는 것으로 시작합니다 myDirective.

지시어의 이름을 지정할 때는 낙타 대소문자 이름을 사용해야 myDirective하지만 호출할 때는 -구분된 이름인 를 사용해야 합니다 my-directive.

ngModel그런 다음 ngModelController 가 필요한 것으로 지정한 개체를 반환합니다  .

몇 가지 인수를 취하는 연결 함수를 만드십시오. 여기서 네 번째 인수 mCtrl는 ngModelController,

그런 다음 하나의 인수를 사용하는 함수(이 경우 이름이 )를 지정합니다 myValidation. 이 인수는 입력 요소의 값입니다.

값에 문자 "e"가 포함되어 있는지 테스트하고 모델 컨트롤러의 유효성을 true또는 로 설정합니다 false.

마지막으로 입력 값이 변경될 때마다 실행되는 다른 함수 배열에 함수를 mCtrl.$parsers.push(myValidation);추가합니다 . myValidation

검증 예

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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-model 은 입력 요소를 모델에 바인딩합니다.

모델 객체에는 user 와 email 의 두 가지 속성이 있습니다.

ng-show 로 인해 color:red 의 범위는 사용자 또는 이메일이 $dirty 및 $invalid 일 때만 표시됩니다 .


❮ 이전의 다음 ❯