집 > 기사 > 웹 프론트엔드 > AngularJs 양식 유효성 검사 방법

AngularJs 양식 유효성 검사 방법

一个新手원래의: 2017-10-19 09:25:291519검색

Anjularjs 양식 유효성 검사

　 사용자가 양식에 입력하는 내용을 기반으로 실시간 시각적 피드백을 제공할 수 있는 것이 매우 중요합니다. 인간 대 인간 의사소통의 맥락에서 양식 검증을 통해 제공되는 피드백은 올바른 입력을 얻는 것만큼 중요합니다.

　 양식 유효성 검사는 사용자에게 유용한 피드백을 제공할 뿐만 아니라 악의적이거나 잘못된 입력으로 인해 웹 애플리케이션이 손상되지 않도록 보호합니다. 우리는 웹 프론트엔드에서 백엔드를 보호하기 위해 최선을 다해야 합니다.

　 AngularJS는 HTML5 양식 유효성 검사 기능과 자체 유효성 검사 지침을 결합할 수 있어 매우 편리합니다. AngularJS는 다양한 양식 유효성 검사 지침을 제공합니다.

<form name="form" novalidate>
    <label name="email">Your email</label>
    <input type="email" name="email" ng-model="email" placeholder="Email Address"/></form>

양식 유효성 검사를 사용하려면 먼저 양식에 위의 예와 같은 이름 속성이 있는지 확인하세요.

　모든 입력 필드는 최대 및 최소 길이 등 기본 유효성 검사를 받을 수 있습니다. 이러한 기능은 새로운 HTML5 양식 속성을 통해 제공됩니다.

　 양식에 대한 브라우저의 기본 유효성 검사 동작을 차단하려면 양식 요소에 novalidate 태그를 추가할 수 있습니다.

　 1. 필수

양식 입력이 채워졌는지 확인하려면 다음을 입력하면 됩니다. 입력 필드 요소에 필요한 HTML5 태그를 추가하세요.

　참고: 필수 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란과 같은 d5fd7aea971a85678ba271703566ebfd 유형에 적용 가능합니다. , radio and file

664b1d4dba28c9f07a4aba952af78480

　　2. 최소 길이 ng-minleng="{number}"

　 양식 입력의 텍스트 길이가 특정 최소값보다 큰지 확인하려면 AngularJS 지시문을 사용하세요. 입력 필드의 ng-minleng="{number}"

<input type="text" ng-minlength="5" />

　　3. 최대 길이 ng-maxlength="{number}"

　 양식 입력의 텍스트 길이가 다음보다 작은지 확인하려면 특정 최대값과 같으면 입력 필드 {number}"

<input type="text" ng-maxlength="20" />

　4에서 AngularJS 지시어 ng-maxlength="를 사용합니다. 패턴 일치 ng-pattern="/PATTERN/"

ng- 사용

<input type="text" ng-pattern="[a-zA-Z]" />

5. 이메일

입력 콘텐츠가 이메일인지 확인하려면 다음과 같이 입력 유형을 이메일로 설정하면 됩니다. :

<input type="email" name="email" ng-model="user.email" />

6. 숫자

입력 내용 확인 숫자인지 여부, 입력 유형을 숫자로 설정:

<input type="number" name="age" ng-model="user.age" />

　7. URL

입력 내용이 숫자인지 확인 URL, 입력 유형을 url로 설정:

<input type="url" name="homepage" ng-model="user.facebook_url" />

양식 제어 변수

　양식의 속성은 해당 속성이 속한 $scope 개체에서 액세스할 수 있으며 $scope에 액세스할 수 있습니다. 객체이므로 JavaScript는 DOM의 양식 속성에 간접적으로 액세스할 수 있습니다. 이러한 속성의 도움으로 우리는 (AngularJS의 다른 모든 것과 마찬가지로) 양식에 대한 실시간 응답을 만들 수 있습니다. 이러한 속성에는 다음이 포함됩니다. (참고로 해당 속성은 아래 형식을 통해 접근 가능합니다.)

　　formName.inputFieldName.property

　■Unmodified form

　사용자가 양식을 수정했는지 여부를 확인하는 데 사용되는 Boolean 속성입니다. 수정되지 않은 경우 true 값, 수정된 경우 false 값

formName.inputFieldName.$pristine

■수정된 양식

　 사용자가 양식을 수정한 한, 입력 확인 여부와 상관없이 그렇지 않으면 값은 true를 반환합니다

formName.inputFieldName.$dirty

■법적 양식

　이 부울 속성은 양식의 내용이 합법적인지 여부를 확인하는 데 사용됩니다. 현재 양식 콘텐츠가 합법적인 경우 다음 속성의 값은 true입니다.

formName.inputFieldName.$valid

■ Illegal form

　이 부울 속성은 양식 콘텐츠가 불법인지 여부를 확인하는 데 사용됩니다. 현재 양식 내용이 불법인 경우 다음 속성의 값은 true입니다.

formName.inputFieldName.$invalid

■ Error

　이것은 AngularJS에서 제공하는 또 다른 매우 유용한 속성인 $error 개체입니다. 여기에는 현재 양식에 대한 모든 유효성 검사와 유효성 여부에 대한 정보가 포함되어 있습니다. 이 속성에 액세스하려면 다음 구문을 사용하세요.

formName.inputfieldName.$error

$parsers

사용자가 컨트롤러와 상호작용하고 ngModelController의 $setViewValue() 메서드가 호출되면 $parsers 배열의 함수가 파이프라인됩니다. 양식은 하나씩 호출됩니다. 첫 번째 $parse가 호출된 후 실행 결과가 두 번째 $parse로 전달되는 식으로 진행됩니다

　 이 함수는 입력 값을 변환하거나 $setValidity() 함수를 통해 양식의 유효성을 설정할 수 있습니다.

　$parsers 배열을 사용하는 것은 사용자 정의 유효성 검사를 구현하는 방법 중 하나입니다.

　　例如，假设我们想要确保输入值在某两个数值之间，可以在 $parsers 数组中入栈一个新的函数，这个函数会在验证链中被调用。

　　每个 $parser 返回的值都会被传入下一个 $parser 中。当不希望数据模型发生更新时返回undefined 。

html

<!DOCTYPE html><html ng-app="myApp"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>表单测试</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="angular.1.2.13.js"></script></head><body>
    <p ng-controller="TestController">
        <form name="testForm">
            <input type="number" name="inputs" ng-test ng-model="obj.number">
            <span ng-show="testForm.inputs.$error.test">good</span>
            <span ng-hide="testForm.inputs.$error.test">bad</span>
            <p>{{ testForm.inputs.$valid }}</p>
            <p>{{ testForm.inputs.$invalid }}</p>
            <p>{{ obj.number }}</p>
        </form>
    </p>
    <script type="text/javascript" src="test5app.js"></script></body></html>

javascript ( test5app.js )

angular.module(&#39;myApp&#39;, []).controller(&#39;TestController&#39;, function($scope) {
    $scope.obj = {
        number: 34
    }
}).directive(&#39;ngTest&#39;, function() {    
return {
        require: &#39;?ngModel&#39;,
        restrict: &#39;AE&#39;,
        link: function($scope, iElm, iAttrs, ngModel) {            
        if (!ngModel) return;
            ngModel.$parsers.push(function(viewValue) {                
            var num = parseInt(viewValue);                
            if (num >= 0 && num < 99) {
                    ngModel.$setValidity(&#39;test&#39;, true);                    
                    return viewValue
                } else {
                    ngModel.$setValidity(&#39;test&#39;, false);                    
                    return undefined
                }
            })
        }
    }
});

위 내용은 AngularJs 양식 유효성 검사 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：iPhone의 이벤트 위임에 대한 zepto 및 jQuery다음 기사：iPhone의 이벤트 위임에 대한 zepto 및 jQuery