나는 프론트 엔드 프로그래머는 아니지만 프론트 엔드에서 잘 검증하는 것이 얼마나 중요한지 이해합니다.
이런 식으로 백엔드는 더 숨을 쉬고 백엔드와 비교할 수 있기 때문에 프론트 엔드는 실제로 사용자의 행복감을 향상시킬 수 있습니다.
AngularJS는 매우 편리한 양식 검증 기능을 제공하고 여기에 기록하십시오.
먼저 다음 코드로 시작하십시오
코드 사본은 다음과 같습니다.
<form ng-app = "myapp"ng-controller = "validationController"name = "mainform"novalidate>
<p> 이메일 :
<입력 유형 = "이메일"이름 = "이메일"ng-model = "이메일"필수>
<span style = "color : red"ng-show = "mainform.email. $ dirty && mainform.email. $ invalid">
<span ng-show = "mainform.email. $ error.required"> 이메일이 필요합니다. </span>
<span ng-show = "mainform.email. $ error.email"> 잘못된 이메일 주소. </span>
</span>
</p>
<p>
<input type = "제출"ng-disabled = "mainform. $ invalid">
</p>
</form>
<cript>
Angular.Module ( 'myApp', [])
.controller ( 'validationController', [ '$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}]);
</스크립트>
입력 태그에 대한 일부 검증 옵션은 일반적으로 HTML5 태그와 함께 사용됩니다.
필수의
<입력 유형 = "텍스트"필수 />
길이
지침 NG-Minlength/NG-Maxlength를 사용하십시오
<입력 유형 = "text"ng-minlength = "5" />
특정 형식
예를 들어, 이메일, URL 및 숫자는 예를 들어 유형을 해당 유형으로 설정합니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "이메일"이름 = "이메일"ng-model = "user.email" />
<입력 유형 = "number"name = "age"ng-model = "user.age" />
<입력 유형 = "url"name = "homepage"ng-model = "user.facebook_url" />
패턴 매칭
Directive NG-Pattern을 사용하십시오.
코드 사본은 다음과 같습니다.
<입력 유형 = "text"ng-pattern = "[az]" />
양식 속성, 이러한 특성은 양식에서보다 쉽게 작동 할 수 있도록합니다.
깨끗한/더러운
예를 들어 수정되었는지 여부를 나타냅니다.
코드 사본은 다음과 같습니다.
<form name = "mainform"ng-controller = "OrderController">
<입력 유형 = "이메일"이름 = "UserEmail"ng-model = "MyEmail" />
{{mainform.usereMail. $ Cristine}}
{{mainform.usereMail. $ dirty}}
</form>
formname.fieldName. $ ristine Mode에서 액세스하기 위해 입력에는 ng- 모델 선언이 있어야합니다.
코드 사본은 다음과 같습니다.
유효/유효하지 않습니다
검증을 통과하는지 여부를 나타냅니다.
코드 사본은 다음과 같습니다.
$ 오류
확인 정보를 양식으로 작성하면 확인이 실패하면 해당 정보가 반환됩니다.
AngularJS는 양식 상태에 따라 CSS 클래스를 제공합니다
코드 사본은 다음과 같습니다.
.ng-pristine
.ng-dirty
.ng-valid
.ng-invalid
예를 들어, 검증을 녹색으로 통과하고 빨간색으로 실패하십시오.
코드 사본은 다음과 같습니다.
input.ng-valid {
색상 : 녹색;
}
input.ng-invalid {
색상 : 녹색;
}
주어진 예에서는 하나의 이메일 확인 만 너무 많이 쓰여집니다. 몇 가지 필드를 추가하면 몇 가지 다른 프롬프트를 추가하고 몇 가지 이벤트를 추가하면 코드가 지저분 해집니다.
실제로, 이렇게하는 것이 좋습니다. 우리는 더 나은 방법을 가지고 있습니다.
Angular-messages.js를 사용하는 것입니다
우선,이 두 단계를 잊지 마십시오
코드 사본은 다음과 같습니다.
<script src = "Angular-messages.js"> </script>
Angular.Module ( 'myApp', [ 'ngmessages'])))
자, 먼저 그 복제물을 NG 메세지 및 NG 메이지로 바꾸면 위의 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<form ng-controller = "validationController"name = "mainform">
<p> 이메일 :
<입력
type = "email"name = "email"ng-model = "myemail"ng-minlength = "3"ng-maxlength = "50"필수 />
<div style = "color : red"ng-messages = "mainform.email. $ error"ng-messages-multiple>
<p ng-message = "필수"> 이메일이 필요합니다. </p>
<p ng-message = "이메일"> 잘못된 이메일 주소. </p>
<p ng-message = "minlength"> 최소 길이 10 </p>
<p ng-message = "maxlength"> 최대 길이 50 </p>
</div>
</p>
<p>
<input type = "제출"ng-disabled = "mainform. $ invalid" />
</p>
</form>
기능의 변화가 없으며 중복 코드 만 제거되었습니다.
NG-Messasges와 NG Messages를 구별하는 데주의를 기울이십시오. ()와 약간 같은 느낌이나요? 그 뒤에있는 NG 메사지 다 점수는 여러 프롬프트가 동시에 나타나는 데 사용됩니다.
그러나 이것은 여전히 충분하지 않습니다. NG 메시지의 내용이 생략 되더라도 여러 필드에 필요한 검증이 존재하면 여전히 중복이 발생합니다.
또한 다른 페이지의 양식에 동일한 내용이 포함 된 경우 점점 더 반복되는 검증 프롬프트가 있습니다.
이 문제를 해결하기 위해 NG Messages Include 지시문을 사용할 수 있습니다.
이 지침은 예를 들어 템플릿을 참조하는 데 사용됩니다. 예를 들어 위의 예는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<form ng-controller = "validationController"name = "mainform">
<p> 이메일 :
<입력
type = "email"name = "email"ng-model = "myemail"ng-minlength = "3"ng-maxlength = "50"필수 />
<div style = "color : red"ng-messages = "mainform.email. $ error"ng-messages-multiple ng-messages-include = "validateTemplate/email.html">
</div>
</p>
<p>
<input type = "제출"ng-disabled = "mainform. $ invalid" />
</p>
</form>
복잡하지 않습니다. 뭔가를 추가합시다.
프롬프트를보다 친절하게 만들기 위해 (?), 우리는 커서 잎 후에 나타나는 프롬프트의 효과를 달성하려고 노력합니다.
현재 지시문을 사용하는 것이 훨씬 편리합니다. 여기서는 먼저 지침과 관련된 정보가 포함됩니다.
먼저 실행 한 다음 그것에 대해 이야기하십시오.
코드 사본은 다음과 같습니다.
var myapp = angular.module ( 'myapp', [])
.controller ( 'validationController', [ '$ scope', function ($ scope) {
$ scope.user = 'kavlez';
$ scope.email = '[email protected]';
}])
.Directive ( 'HintonBlur', [function () {
반품 {
필요 : 'ngmodel',
링크 : 함수 (범위, 요소, attrs, ctrl) {
ctrl.focused = false;
요소 .Bind ( 'Focus', function (evt) {
스코프. $ apply (function () {ctrl.focused = true;});
}). bind ( 'blur', function (evt) {
스코프. $ apply (function () {ctrl.focused = false;});
});
}
}
}]);
여기서 우리는 초점을 사용하여 커서가 특정 속성에 있는지 여부를 결정합니다. HintonBlur 지시문을 사용하는 객체에서 초점 또는 블러 이벤트가 발생하면 초점 상태가 변경되었습니다.
양식은 다음과 같이 변경됩니다.
코드 사본은 다음과 같습니다.
<form ng-controller = "validationController"name = "mainform">
<p> 이메일 :
<입력 유형 = "이메일"이름 = "이메일"ng-model = "MyEmail"ng-minlength = "3"ng-maxlength = "50"필요한 힌트-온 블러 />
<div style = "color : red"ng-messages = "mainform.email. $ error"ng-show = "! mainform.email.focused"ng-messages-multiple ng-messages-include = "validatemplate/email.html">
</div>
</p>
<p>
<input type = "제출"ng-disabled = "mainform. $ invalid" />
</p>
</form>
NG-SHOW에 중점을 둔 판단을 추가하면 False 일 때 프롬프트가 나타납니다.
지금은 그렇게 보입니다.
지침을 사용하는 검증 방법 및 유효성을 사용자 정의하십시오.
작성한 이메일이 점유되었는지 확인하십시오. 간단한 시뮬레이션은 다음과 같습니다.
코드 사본은 다음과 같습니다.
.Directive ( 'IsAlreadyTaken', function () {
반품 {
필요 : 'ngmodel',
링크 : 함수 (범위, ele, attrs, ctrl) {
ctrl. $ parsers.push (function (val) {
ctrl. $ setValidity ( 'emailavailable', false);
var emailTable = [
for (var i = 0; i <emailtable.length; i+= 1)
if (val == emailtable [i])
반품;
ctrl. $ setValidity ( 'emailavailable', true);
반환 val;
})
}
}
})
입력 요소에 IS-Alleady-Taken 속성을 추가하고 다른 ng-message를 추가하십시오.
코드 사본은 다음과 같습니다.
<p ng-message = "emailavailable"> 이미 가져옵니다! 다른 이메일 주소를 시도하십시오! </p>