AngularJS는 형식 검증을 구현합니다_AngularJS

저는 프론트엔드 프로그래머는 아니지만 프론트엔드에서 검증을 하는 것이 얼마나 중요한지 알고 있습니다.

이렇게 하면 백엔드가 한숨을 쉴 수 있고, 백엔드에 비해 프런트엔드는 실제로 사용자의 만족도를 높일 수 있기 때문입니다.

AngularJS는 여기에 기록된 매우 편리한 양식 유효성 검사 기능을 제공합니다.

먼저 다음 코드로 시작하세요

코드 복사 코드는 다음과 같습니다.

이메일:
          
           
                                  이메일은 필수입니다.
                이메일 주소가 잘못되었습니다.
>

           

양식>

angular.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
$scope.user = '카블레즈';
$scope.email =
'sweet_dreams@aliyun.com'; }]);

일반적으로 HTML5 태그와 함께 사용되는 입력 태그에 대한 일부 유효성 검사 옵션입니다.

필수

길이

ng-minlength/ng-maxlength 명령 사용

특정 형식
예를 들어 이메일, URL, 번호 등을 해당 유형으로 설정하면 됩니다. 예:

코드 복사 코드는 다음과 같습니다.

패턴 매칭

ng-pattern 지시어를 사용하세요. 예:

코드 복사 코드는 다음과 같습니다.

양식 작업을 더 쉽게 해주는 양식 속성

깨끗함/더러움

등 수정 여부를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

{{mainForm.userEmail.$pristine}}
{{mainForm.userEmail.$dirty}}
양식>

formName.fieldName.$pristine 모드에서 액세스하려면 입력에 ng-model 선언이 있어야 합니다.

코드 복사 코드는 다음과 같습니다.

유효/무효

은 검증 통과 여부를 나타냅니다.

코드 복사 코드는 다음과 같습니다.

$오류

양식 확인 정보, 확인 실패 시 해당 정보가 반환됩니다.

AngularJS는 양식 상태에 해당하는 CSS 클래스를 제공합니다

코드 복사 코드는 다음과 같습니다.

.ng-원래
.ng-더러운
.ng-유효
.ng-잘못됨

예를 들어 확인 통과를 녹색으로, 실패를 빨간색으로 설정합니다.

코드 복사 코드는 다음과 같습니다.

input.ng-유효 {
색상: 녹색;
}
input.ng-잘못됨 {
색상: 녹색;
}

주어진 예에서는 하나의 이메일 확인만 작성됩니다. 여러 필드, 여러 다른 프롬프트 및 여러 이벤트를 추가하면 코드가 지저분해집니다.

이것은 실제로 권장되지 않습니다. 더 나은 방법이 있습니다.
그냥angular-messages.js를 사용하세요

우선, 이 두 단계를 잊지 마세요

코드 복사 코드는 다음과 같습니다.

angular.module('myApp', ['ngMessages'])

좋아요, 먼저 해당 중복 항목을 ng-messages 및 ng-message로 바꾸세요.

코드 복사 코드는 다음과 같습니다.

이메일:
                                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" 필수 />
           

~ >               

이메일 주소가 잘못되었습니다.

              

최소 길이 10

               

최대 길이 50

>

          

양식>

기능에는 아무런 변화가 없으며 단지 중복된 코드가 모두 제거되었다는 것뿐입니다. ng-messages와 ng-message를 구별하는 데 주의하세요. with()와 약간 비슷한 느낌이 드나요? 여기서는 여러 프롬프트를 동시에 표시하기 위해 다음 ng-messages-multiple이 사용됩니다.

그러나 이것만으로는 충분하지 않습니다. ng-message의 내용이 생략되어도 여러 필드에 필수 확인 항목이 있는 경우 중복이 발생합니다.

더욱이, 서로 다른 페이지의 양식이 모두 동일한 내용을 포함하는 경우 확인 메시지가 점점 더 반복적으로 표시됩니다.

이 문제를 해결하기 위해 ng-messages-include 지시어를 사용할 수 있습니다.
이 지시어는 템플릿을 참조하는 데 사용됩니다. 예를 들어 위의 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

이메일:
                                type="email" name="email" ng-model="myEmail" ng-minlength="3" ng-maxlength="50" 필수 />
           

>

           

양식>

복잡하지는 않으니 몇 가지만 더 추가해 보겠습니다.
프롬프트를 좀 더 친근하게(?) 만들기 위해 커서가 떠난 후 프롬프트가 나타나는 효과를 구현해 보겠습니다.
이때 지시어를 사용하는 것이 훨씬 더 편리할 것입니다. 여기서는 먼저 지시어와 관련된 내용을 몇 가지 살펴보겠습니다.

먼저 실행해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

var myApp = angle.module('myApp',[])
.controller('validationController', ['$scope',function($scope) {
          $scope.user = 'Kavlez';
$scope.email = 'sweet_dreams@aliyun.com';
}])
.directive('hintOnBlur', [function() {
         반품 {
             필요: 'ngModel',
              링크: 함수(범위, 요소, 속성, Ctrl) {
                ctrl.focused = false;
                     element.bind('focus', function(evt) {
범위.$apply(function() {ctrl.focused = true;});
                   }).bind('blur', function(evt) {
범위.$apply(function() {ctrl.focused = false;});
                });
            }
}
}]);

여기에서는 커서가 특정 속성에 있는지 확인하기 위해 focusOnBlur 지시문을 사용하여 객체에 포커스 또는 흐림 이벤트가 발생하면 포커스 상태가 변경됩니다.

이에 따라 형태도 변경됩니다.

코드 복사 코드는 다음과 같습니다.

이메일:
           

>

           

양식>

ng-show에 focusd 판단을 추가하면 false일 경우 프롬프트가 표시됩니다.

지금도 그런 것 같습니다.

지시문도 사용하는 확인 방법과 유효성을 사용자 정의합니다.

입력한 이메일 주소가 이미 사용 중인지 확인하세요. 다음은 간단한 시뮬레이션입니다.

코드 복사 코드는 다음과 같습니다.

.directive('isAlreadyTaken', function() {
    반환 {
        필요: 'ngModel',
        링크: 함수(범위, ele, attrs, ctrl) {
            ctrl.$parsers.push(함수(발) {
                ctrl.$setValidity('emailAvailable', false);
                var emailTable = [
                    'K@gmail.com',
                    'a@gmail.com',
                    'v@gmail.com',
                    'l@gmail.com',
                    'e@gmail.com',
                    'z@gmail.com'];
                (var i=0;i                     if(val==emailTable[i])
                        반품;
                ctrl.$setValidity('emailAvailable', true);
                값 반환;
            })
        }
    }
})

입력 元素中加上은 이미 촬영되었습니다.属性,并且再加一个ng-메시지:

复主代码 代码如下:

이미 수신되었습니다! 다른 이메일 주소를 사용해 보세요!