AngularJS 양식��확인

AngularJS는 입력 데이터를 확인할 수 있습니다。

양식��확인

AngularJS는 클라이언트 양식��확인을 제공합니다。

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

AngularJS는 입력이 터치되거나 수정되었는지에 대한 정보도 포함하고 있습니다。

규준 HTML5 속성을 사용하여 입력을 확인하거나, 자신의 확인 함수를 생성할 수 있습니다。

클라이언트��확인은 사용자 입력을 단독으로 보호할 수 없습니다. 서버쪽��확인도 필요합니다。

필수

HTML5 속성 사용 필수 지정된 입력 필드는 필수입니다：

예제

이 입력 필드는 필수입니다：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>입력의 유효 상태는：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

직접 시도해 보세요

이메일

HTML5 타입 사용 이메일 지정된 값은 이메일이어야 합니다：

예제

이 입력 필드는 이메일이어야 합니다：

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>입력의 유효 상태는：</p>  
<h1>{{myForm.myInput.$valid}}</h1>

직접 시도해 보세요

표单 상태와 입력 상태

AngularJS는 표单과 입력 필드의 상태를 지속적으로 업데이트합니다。

입력 필드는 다음 상태를 가집니다：

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

이들은 모두 입력 필드의 속성으로서 참이거나 거짓일 수 있습니다。

표单은 다음 상태를 가집니다：

  • $pristine 아무 필드도 수정되지 않았습니다
  • $dirty 하나 이상의 필드가 수정되었습니다
  • $invalid 표单 내용이 유효하지 않습니다
  • $valid 표单 내용이 유효합니다
  • $subscribed 표单이 제출되었습니다

이들은 모두 표单의 속성으로서 참이거나 거짓일 수 있습니다。

이러한 상태를 사용하여 사용자에게 의미 있는 메시지를 표시할 수 있습니다. 예를 들어, 필드가 필수이고 사용자가 공란을 남겼을 때 사용자에게 경고를 해야 합니다：

예제

필드가 터치되었고 비어 있으면 오류 메시지를 표시합니다：

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">이름은 필수입니다.</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://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>验证示例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名：<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">用户名是必填项。<
  </span>
</p>
<p>电子邮件：<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">电子邮件是必填项。</span>
  <span ng-show="myForm.email.$error.email">无效的电子邮件地址。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

직접 시도해 보세요

HTML 양식 속성 novalidate 기본적인 브라우저 검증을 비활성화합니다.

예제 설명:

AngularJS 지시 ng-model 입력 요소를 모델에 바인딩합니다.

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

에 따라 ng-show사용자 또는 이메일이 $dirty 과 $invalid color:red를 가진 spans가 표시됩니다.