AngularJS는 양식 유효성 검사를 위해 ngMessages를 사용합니다._AngularJS

AngularJS는 2009년에 탄생했으며 Misko Hevery 등이 개발했으며 나중에 Google에 인수되었습니다. 많은 Google 제품에서 사용되어 온 뛰어난 프런트엔드 JS 프레임워크입니다. AngularJS에는 많은 기능이 있으며 그 중 가장 핵심은 MVVM, 모듈화, 자동화된 양방향 데이터 바인딩, 의미 태그, 종속성 주입 등입니다.

"ngMessages"라는 모듈은 npm install angle-messages를 통해 설치됩니다. ngMessages를 사용하기 전에 다음과 같이 유효성 검사를 작성할 수 있습니다.

<form name="userForm">
<input 
type="text" 
name="username" 
ng-model="user.username" 
ng-minlength="3" 
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

위에는 가능한 인증 실패 각각을 나열하고, 오류 메시지 표시 여부를 수동으로 작성합니다.

"ngMessages" 모듈을 사용하면 대략 다음과 같이 작성할 수 있습니다.

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages는 표시할 오류를 자동으로 결정합니다.

ngMessages 사용 시 몇 가지 핵심 사항:

● npm 설치 각도 메시지
● 인용문: angle-messages.js
● 종속성: angle.module('app',['ngMessages'])

다음은 간단한 데모 파일 구조입니다.

노드_모듈/
app.js
emailmessages.html
index.html

설치는 다음과 같습니다.

npm 설치 부트스트랩
npm 설치 각도
npm 설치 각도 메시지

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emailmessages.html

이메일과 관련된 양식 확인을 여기에 넣고 b1010a975dc5ebb8b976dafe68a17c7a16b28748ea4df4d9c2150843fecfba68를 통해 페이지 어딘가에 표시합니다.

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps: 일반적으로 사용되는 양식 유효성 검사 지침

1. 필수항목 확인

양식 입력이 채워졌는지 여부에 관계없이 입력 필드 요소에 HTML5 필수 태그를 추가하기만 하면 됩니다.

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

b1b1d940f222d851e328a68201122ff0

2. 최소 길이

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

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

98d5fcb979fcf1c21f11fdb6e9d615a2

3. 최대 길이

양식 입력의 텍스트 길이가 특정 최대값보다 작거나 같은지 확인하려면 입력 필드에 ng-maxlength="{number}" 명령을 사용하세요.

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

44bcd696cf393169990dcefab9a1c0d1

4. 패턴 매칭

ng-pattern="/PATTERN/"을 사용하여 입력이 지정된 정규 표현식과 일치하는지 확인하세요.

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

44ccc91a1cd14c1ff9a3a4b62eafbda4

5. 이메일

입력 내용이 이메일인지 확인하려면 다음과 같이 입력 유형을 이메일로 설정하면 됩니다.

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

6. 숫자

입력 내용이 숫자인지 확인하고 입력 유형을 숫자로 설정합니다.

코드 복사

코드는 다음과 같습니다. 1005edcba35f1e29b15d03212ac61afe

7. URL

입력 콘텐츠가 URL인지 확인하고 입력 유형을 url로 설정합니다.

코드 복사

코드는 다음과 같습니다. b4a4f76522ddf066026eb75900ac307e