AngularJS에서 사용자 지정 양식 유효성 검사 추가
유효성 검사는 일반적으로 오류 수정 또는 데이터 일관성을 위해 입력 데이터의 정확성을 스캔하는 프로세스입니다. AngularJS 사용자 지정 유효성 검사는 개발자가 사용자 지정 유효성 검사 규칙을 만들 수 있는 강력한 라이브러리입니다.
이 기사에서는 AngularJS 사용자 지정 유효성 검사에 대한 모든 내용을 설명합니다. 양식 유효성 검사기부터 시작하겠습니다.
AngularJS의 양식 유효성 검사기
Angular에서 지원하는 기본 형식에는 두 가지 유형이 있습니다.
- 템플릿 기반 양식
- 반응형
템플릿 기반 양식은 선언적이고 사용하기 쉬우며 잘 테스트된 양식 작성 방법을 제공합니다. 이것은 Angular의 기본 형식입니다.
반응형 양식은 양식의 동작을 더 잘 제어할 수 있는 보다 낮은 수준의 API입니다. 관찰 가능 항목 또는 이벤트 이미 터와 같은 반응성 데이터 소스를 사용하도록 설계되었습니다.
양식의 모든 필드는 FormControl로 작동하여 양식이 유효한지 여부, 실제 필드 값 및 기타 세부 정보와 같은 해당 필드에 대한 특정 정보를 반환할 수 있습니다.
AngularJS의 사용자 지정 유효성 검사기
Angular에는 Validator API라는 데이터 유효성 검사를 위한 내장 시스템이 있습니다. 그러나 더 복잡한 유효성 검사 규칙이 있거나 유효성 검사 규칙이 애플리케이션에 특정한 경우 사용자 지정 유효성 검사기를 사용할 수 있습니다.
Angular의 사용자 지정 유효성 검사기는 개발자가 외부 라이브러리에 의존하지 않고 자체 유효성 검사 규칙을 만들 수 있기 때문에 매우 유용합니다. 또한 개발자가 Angular 및 기타 응용 프로그램 부분 외부에서 유효성 검사 논리를 확장하는 것이 더 간단해집니다.
AngularJS 사용자 지정 유효성 검사는 jQuery와 같은 다른 유효성 검사 라이브러리와 함께 사용할 수 있지만 필수는 아닙니다.
AngularJS에서 사용자 지정 양식 유효성 검사를 생성하거나 추가하는 단계
다음 단계는 AngularJS 사용자 지정 양식 유효성 검사를 만드는 방법을 안내합니다.
- 새 AngularJS 프로젝트를 만듭니다.
ng-bootstrapCSS 파일을index.html파일에 포함합니다.ng-bootstrapJavaScript 파일을index.html파일에 추가합니다.- HTML 페이지에서 입력 필드가 있는 사용자 지정 양식을 만들고
index.html의 본문 섹션에 포함합니다. - Angular 컨트롤러를 생성하고
index.html에 추가합니다. - Angular 양식 지시문을 생성하고
index.html에 추가합니다. - Angular 컨트롤러에 양식 컨트롤러를 삽입합니다.
AngularJS에서 사용자 지정 양식 유효성 검사의 예를 살펴보겠습니다.
HTML 코드:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
</head>
<body ng-app="FormValidationExample">
<div ng-controller="ctrlForm">
<form name="myForm" novalidate>
<div class="input-item">
<label for="txtEmail">Your email</label><br>
<input type="email" name="email" id="txtEmail" class="text-box" ng-model="email" required custom-focus />
<div class="error-wrapper" ng-show="myForm.email.$dirty && myForm.email.$invalid && !myForm.email.$focused">
<span ng-show="myForm.email.$error.required">Email is required</span>
<span ng-show="myForm.email.$error.email">Please enter a valid email address</span>
</div>
</div>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
</form>
</div>
</body>
</html>
자바스크립트 코드:
angular.module('FormValidationExample', [])
.controller('ctrlForm', ['$scope', function($scope) {
$scope.checkboxes_motives = { 'checked': false, items: {} };
$scope.choices = ['work', 'play'];
$scope.selectAllMotives = function(value) {
angular.forEach($scope.choices, function (motive) {
$scope.checkboxes_motives.items[motive] = value;
});
};
}])
.directive('customFocus', [function() {
var FOCUS_CLASS = "custom-focused";
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$focused = false;
element.bind('focus', function(evt) {
element.addClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = true;});
}).bind('blur', function(evt) {
element.removeClass(FOCUS_CLASS);
scope.$apply(function() {ctrl.$focused = false;});
});
}
}
}]);
이 예에서는 이메일 주소의 유효성을 검사했습니다. 여기에 잘못된 이메일 주소를 작성하면 수정하지 않으면 오류가 표시됩니다.
위에서 언급한 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook