제출 시 AngularJS 양식 유효성 검사: 등록 예

AngularJS의 양식 유효성 검사

양식 검증 AngularJS에서는 양식에 입력된 데이터가 올바르고 완전한지 확인하는 프로세스입니다. 사용자가 양식을 제출하면 세부 정보가 서버로 전송되기 전에 먼저 검증이 수행됩니다. 검증 프로세스는 입력 필드에 대한 세부 정보가 올바른 방식으로 입력되었는지 가능한 한 최대한 보장합니다.

실제 사례에서, 이 사이트에 대한 전체 액세스 권한을 얻기 전에 등록 양식을 작성해야 하는 사이트를 가정해 보겠습니다. 등록 페이지에는 사용자 이름, 비밀번호, 이메일 ID 등을 위한 입력 필드가 있습니다.

예를 들어, 이메일 ID는 항상 다음 형식이어야 합니다. 사용자 이름@사이트.도메인; 누군가가 이메일 ID에 사용자 이름만 입력하면 이상적으로는 검증이 실패해야 합니다. 따라서 검증은 세부 정보가 추가 처리를 위해 서버로 전송되기 전에 이러한 기본 검사를 수행하는 것을 살펴봅니다.

HTML5를 사용한 양식 유효성 검사

양식 유효성 검사는 사용자가 웹 양식에 입력한 정보가 서버로 전송되기 전에 사전 유효성을 검사하는 프로세스입니다. 항상 클라이언트 측 자체에서 정보의 유효성을 검사하는 것이 좋습니다. 입력한 정보가 잘못된 경우 사용자에게 양식을 다시 표시해야 하는 경우 오버헤드가 줄어들기 때문입니다.

HTML5에서 AngularJS 양식 유효성 검사를 수행하는 방법을 살펴보겠습니다.

우리의 예에서 우리는 사용자에게 사용자 이름, 비밀번호, 이메일 ID, 나이와 같은 세부 정보를 입력해야 하는 간단한 등록 양식을 보여줄 것입니다.

양식에는 사용자가 올바른 방식으로 정보를 입력했는지 확인하는 유효성 검사 컨트롤이 있습니다.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

코드 설명

텍스트 입력 유형의 경우 '필수' 속성을 사용합니다. 즉, 양식이 제출될 때 텍스트 상자가 비어 있을 수 없으며 텍스트 상자에 어떤 종류의 텍스트가 있어야 합니다.
다음 입력 유형은 비밀번호입니다. 입력 유형이 비밀번호로 표시되어 있으므로 사용자가 해당 필드에 텍스트를 입력하면 해당 내용이 마스킹됩니다.
입력 유형이 이메일로 지정되었으므로 상자의 텍스트는 패턴과 일치해야 합니다. 이름@사이트.도메인.
입력 유형이 숫자로 표시되면 사용자가 키보드나 알파벳을 사용하여 문자를 입력하려고 하면 텍스트 상자에 입력되지 않습니다.

코드가 성공적으로 실행되면 제출 시 AngularJS 양식 검증을 위해 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

산출

양식 유효성 검사가 실제로 수행되는 모습을 보려면 화면에 정보를 입력하지 않고 제출 버튼을 클릭하세요.

제출 버튼을 클릭하면 팝업이 나타나 필드를 채워야 한다는 유효성 검사 오류가 표시됩니다.

따라서 필수로 표시된 컨트롤에 대한 유효성 검사로 인해 사용자가 텍스트 필드에 값을 입력하지 않으면 오류 메시지가 표시됩니다.

사용자가 비밀번호 컨트롤에 값을 입력하면 입력되는 문자를 가리기 위해 '*' 기호가 사용되는 것을 볼 수 있습니다.

그러면 잘못된 이메일 ID를 입력하고 제출 버튼을 클릭해 보겠습니다. 제출 버튼을 클릭하면 필드에 @ 기호가 있어야 한다는 유효성 검사 오류가 표시되는 팝업이 나타납니다.

따라서 이메일 컨트롤로 표시된 컨트롤에 대한 유효성 검사에서 사용자가 텍스트 필드에 적절한 이메일 ID를 입력하지 않으면 오류 메시지가 표시됩니다.

마지막으로 연령 텍스트 컨트롤에 문자를 입력하려고 하면 화면에 입력되지 않습니다. 컨트롤은 숫자가 컨트롤에 입력될 때만 값으로 채워집니다.

$dirty, $valid, $invalid, $pristine을 사용한 양식 유효성 검사

AngularJS와 유효성 검사를 위한 추가 속성을 제공합니다. AngularJS는 유효성 검사를 위해 컨트롤에 대해 다음 속성을 제공합니다.

$dirty – 사용자가 컨트롤과 상호 작용했습니다.
$유효 – 필드 내용이 유효합니다.
$잘못됨 – 필드 내용이 잘못되었습니다.
$원시 그대로 – 사용자가 아직 컨트롤과 상호 작용하지 않았습니다.

다음은 Angular 검증을 수행하기 위해 따라야 하는 단계입니다.

단계 1) 양식을 선언할 때 유효성 검사 없음 속성을 사용하세요. 이 속성은 유효성 검사가 AngularJS에 의해 수행됨을 HTML5에 알려줍니다.

단계 2) 양식에 정의된 이름이 있는지 확인하십시오. 이렇게 하는 이유는 Angular 유효성 검사를 수행할 때 양식 이름이 사용되기 때문입니다.

단계 3) 각 컨트롤에 정의된 이름도 있는지 확인하세요. 이렇게 하는 이유는 Angular 검증을 수행할 때 컨트롤 이름이 사용되기 때문입니다.

단계 4) 사용 ng-쇼 컨트롤의 $dirty, $invalid 및 $valid 속성을 확인하는 지시어입니다.

위에서 언급한 단계를 통합한 예를 살펴보겠습니다.

우리의 예에서,

우리는 사용자가 텍스트 상자에 주제 이름을 입력해야 하는 간단한 텍스트 필드를 만들 것입니다. 이것이 완료되지 않으면 검증 오류가 발생하고 오류 메시지가 사용자에게 표시됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<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>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

코드 설명

"myForm"이라는 양식 이름을 지정했습니다. 이는 AngularJS 유효성 검사를 위해 양식의 컨트롤에 액세스할 때 필요합니다.
"novalidate" 속성을 사용하여 HTML 양식이 AngularJS에서 유효성 검사를 수행할 수 있도록 합니다.
ng-show 지시문을 사용하여 "$dirty" 및 "$invalid" 속성을 확인합니다. 즉, 텍스트 상자가 수정된 경우 "$dirty" 속성 값이 true가 됩니다. 또한 텍스트 상자 값이 null인 경우 "$invalid" 속성이 true가 됩니다. 따라서 두 속성이 모두 true이면 컨트롤에 대한 검증이 실패합니다. 따라서 두 값이 모두 true이면 ng-show도 true가 되고 빨간색 문자가 있는 span 컨트롤이 표시됩니다.
여기서 우리는 "$error" 속성을 체크하는데, 이 속성도 true로 평가되는데, 컨트롤에 대해 값을 입력해야 한다고 언급했기 때문입니다. 그런 경우, 텍스트 상자에 데이터가 입력되지 않으면 span 컨트롤은 "사용자 이름이 필요합니다"라는 텍스트를 표시합니다.
텍스트 상자 컨트롤 값이 유효하지 않으면 사용자가 양식을 제출할 수 없도록 제출 버튼도 비활성화하려고 합니다. 컨트롤의 "$dirty" 및 "$invalid" 속성의 조건부 값을 기반으로 이를 수행하기 위해 컨트롤에 "ng-disabled" 속성을 사용하고 있습니다.
컨트롤러에서 우리는 텍스트 상자 값의 초기 값을 텍스트 'AngularJS'로 설정합니다. 이것은 폼이 처음 표시될 때 텍스트 상자에 일부 기본값을 설정하기 위해 수행되는 것입니다. 텍스트 상자 필드에 대한 검증이 어떻게 발생하는지 더 잘 보여줍니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

산출

폼이 처음 표시될 때 텍스트 상자에는 "AngularJS" 값이 표시되고 "submit 버튼"이 활성화됩니다. 컨트롤에서 텍스트를 제거하자마자 검증 오류 메시지가 활성화되고 Submit 버튼이 비활성화됩니다.

위 스크린샷에는 두 가지가 표시됩니다.

제출 버튼이 비활성화되었습니다.
주제 텍스트 상자에 주제 이름이 없습니다. 따라서 "사용자 이름이 필요합니다."라는 오류 메시지가 발생합니다.

AngularJS 자동 유효성 검사를 사용한 양식 유효성 검사

AngularJS에는 유효성 검사를 위한 사용자 지정 코드를 작성할 필요 없이 양식의 모든 컨트롤을 자동으로 유효성 검사하는 기능이 있습니다. 이는 "jcs-AutoValidate"라는 사용자 정의 모듈을 포함하여 수행할 수 있습니다.

이 모듈을 사용하면 유효성 검사를 수행하거나 오류 메시지를 표시하기 위해 특별한 코드를 배치할 필요가 없습니다. 이는 모두 JCS-AutoValidate 내부의 코드에 의해 처리됩니다.

이를 달성하는 방법에 대한 간단한 예를 살펴보겠습니다.

이 예에서,

우리는 필수 필드인 텍스트 상자 컨트롤이 있는 간단한 폼을 만들 것입니다. 이 컨트롤이 채워지지 않으면 오류 메시지가 표시되어야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

코드 설명

먼저 모든 자동 유효성 검사 기능이 있는 "jcs-auto-validate.js" 스크립트를 포함해야 합니다.
"div 태그"를 포함한 각 요소가 "form-group" 클래스에 배치되었는지 확인해야 합니다.
또한 입력 컨트롤과 같은 각 요소(입력 컨트롤, 범위 컨트롤, div 컨트롤 등과 같은 HTML 요소)도 양식 그룹 클래스에 배치되어 있는지 확인해야 합니다.
AngularJS JS 모듈에 jcs-autovalidate를 포함합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

산출

기본적으로 코드를 실행하면 위의 양식이 HTML 코드에 따라 표시됩니다.

양식을 제출하려고 하면 “이 필드는 필수입니다.”라는 오류 메시지가 나타납니다. 이 모든 작업은 JCS-AutoValidate 옵션을 통해 수행됩니다.

Ladda 버튼을 통한 사용자 피드백

"ladda" 버튼은 버튼 위에 있는 버튼을 위해 만들어진 특별한 프레임워크입니다. JavaScript 버튼을 눌렀을 때 시각적 효과를 주기 위해.

따라서 버튼에 "ladda" 속성이 부여되고 눌러지면 회전 효과가 표시됩니다. 또한 추가 시각적 효과를 제공하기 위해 버튼에 사용할 수 있는 다양한 데이터 스타일이 있습니다.

"ladda" 버튼이 작동하는 모습을 보는 방법에 대한 예를 살펴보겠습니다. 제출 버튼이 있는 간단한 양식을 살펴보겠습니다. 버튼을 누르면 버튼에 회전 효과가 표시됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

코드 설명

우리는 “ng-제출” 지시문을 사용하여 “submit”이라는 함수를 호출합니다. 이 함수는 제출 버튼의 ladda 속성을 변경하는 데 사용됩니다.
ladda 속성은 ladda 프레임워크의 특수 속성입니다. 제어에 스핀 효과를 추가하는 것이 바로 이 속성입니다. 제출하는 변수에 ladda 속성의 값을 설정하고 있습니다.
데이터 스타일 속성은 ladda 프레임워크에서 제공하는 추가 속성으로, 제출 버튼에 다른 시각적 효과를 추가합니다.
ladda 프레임워크가 작동하려면 'AngularJS-ladda' 모듈을 AngularJS.JS 애플리케이션에 추가해야 합니다.
처음에는 'submitting'이라는 변수의 값을 정의하고 false로 설정하고 있습니다. 이 값은 제출 버튼의 ladda 속성에 대해 설정됩니다. 처음에 이것을 false로 설정함으로써 우리는 아직 제출 버튼이 ladda 효과를 가지기를 원하지 않는다는 것을 의미합니다.
제출 버튼을 눌렀을 때 호출되는 함수를 선언하고 있습니다. 이 함수에서는 '제출'을 true로 설정합니다. 이렇게 하면 제출 버튼에 ladda 효과가 적용됩니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

산출

양식이 처음 표시될 때 제출 버튼이 간단한 형태로 표시됩니다.

제출 버튼을 누르면 컨트롤러의 제출 변수가 true로 설정됩니다. 이 값은 제출 버튼의 "ladda" 속성으로 전달되어 버튼의 회전 효과를 발생시킵니다.

제품 개요

'필수' 속성을 사용하여 텍스트 상자 HTML 컨트롤에 대한 유효성 검사를 수행할 수 있습니다.
HTML5에서는 비밀번호, 이메일, 번호 등 새로운 컨트롤이 추가되어 고유한 검증 방식을 제공합니다.
AngularJS의 양식 유효성 검사는 양식 컨트롤의 $dirty, $valid, $invalid 및 $pristine 값을 확인하여 처리됩니다.
AngularJS 애플리케이션의 자동 유효성 검사는 JCS-auto 유효성 검사 모듈을 사용하여 수행할 수도 있습니다.
Ladda 버튼을 Angular.js 애플리케이션에 추가하면 버튼을 누를 때 사용자에게 향상된 시각적 느낌을 줄 수 있습니다.

AngularJS의 양식 유효성 검사

HTML5를 사용한 양식 유효성 검사

코드 설명

산출

관련 기사

$dirty, $valid, $invalid, $pristine을 사용한 양식 유효성 검사

코드 설명

산출

AngularJS 자동 유효성 검사를 사용한 양식 유효성 검사

코드 설명

산출

Ladda 버튼을 통한 사용자 피드백

코드 설명

산출

제품 개요

뉴스레터 신청하기