집 > 기사 > 웹 프론트엔드 > AngularJS는 형식 검증을 구현합니다_AngularJS

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

WBOY원래의: 2016-05-16 16:17:48993검색

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

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

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

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

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

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

필수

길이

ng-minlength/ng-maxlength 명령 사용

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

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

패턴 매칭

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

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

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

깨끗함/더러움

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

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

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-메시지:

复主代码代码如下:

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

성명：

이전 기사：왼쪽, 가운데 또는 오른쪽 버튼을 클릭했는지 확인하는 js 메소드다음 기사：왼쪽, 가운데 또는 오른쪽 버튼을 클릭했는지 확인하는 js 메소드

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

관련 기사