일반적인 양식 검증 지침
1. 필요한 검증
양식 입력이 채워 졌는지 여부는 입력 필드 요소에 필요한 HTML5 태그를 추가하십시오.
다음과 같이 코드를 복사하십시오. <input type = "text"필요한 />
2. 최소 길이
양식 입력의 텍스트 길이가 특정 최소 값보다 크지 않은지 확인하고 입력 필드에서 명령어 ng-minleng = "{number}"를 사용하십시오.
다음과 같이 코드를 복사하십시오. <input type = "text"ng-minlength = "5" />
3. 최대 길이
양식 입력의 텍스트 길이가 특정 최대 값보다 작거나 같거나 동일했는지 확인하고 입력 필드에서 명령어 ng-maxlength = "{number}"를 사용하십시오.
다음과 같이 코드를 복사하십시오. <input type = "text"ng-maxlength = "20" />
4. 패턴 매칭
입력이 지정된 정규식과 일치하는지 확인하려면 ng-pattern = "/pattern/"을 사용하십시오.
코드 코드를 다음과 같이 복사하십시오. <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" />
특정 구현에서 이러한 양식 검증을 테스트합시다.
<div> <form robole = "form"> <div> <div> <레이블에 대한 = "name"> 1. required </label> </div> <div> input id = "name"type = "text"필수 ng-model = 'user.name'/> </div> <div> <div> <label "minlength"> 2. 최소 길이 = 5 </label> </div> <div> <입력 유형 = "텍스트"id = "minlength"ng-minlength = "5"ng-model = "user.minlength"/> </div> <div> <레이블에 대한 = "minlength"> 3. max rength = 20 </label> <div> <input type = "텍스트" "ng-mod elight" "" " ng-maxlength = "20"/> </div> </div> <div> <div> <레이블에 대한 = "minlength"> 4. 패턴 매칭 </label> </div> <div> <입력 유형 = "text"id = "minlength"ng-model = "user.pattern"ng-pattern = "/^[a-za-z]*/d $/"/</div> </div> <div> <레이블 ""이메일 "> 5. 이메일 </label> </div> </div> <div> <레이블에 대한 = "이메일"> 5. 이메일 </label> </div> <div> <입력 유형 = "email"id = "email"name = "email"ng-model = "user.email"/> </div> </div> <div> <div> <레이블 ""Age "> 6. 번호 </label> </div> <div> <입력 유형 = "숫자"id = "age"name = "age"ng-model = "user.age"/> </div> </div> <div> <div> < "url"> 7. url </div> <div> <input type = "url"id = "url"name "ng"ng "ng" "url"nampage "ng"nompage "homepage"nompage " </div> </div> <div> <입력 유형 = "value ="제출 "/> </div> </form> </div> <div> 1. 필수 필드 : {{user.name}} <br> 2. min. 길이 = 5 : {{user.minlength}} <br> 3. 최대 길이 = 20 : {{user.maxlength}} <br> 4. 패턴 일치 : {{user.pattern}} <br> 5. 이메일 : {user.email} <br> 6. {{user.age}} <<br> 7.url : {{user.url}} <br> </div>시험에서, 우리는 표현이 검증을 만족시킬 때만 양방향 결합이 실시간으로 수행 될 것임을 발견했다. 동시에, 우리는 렌더링이 다음과 같습니다.
아무 일도 일어나지 않은 것 같습니다. 그러나 우리가 그다지 좋지 않은 HTML5 검증 팀이있는 브라우저에 포트하면 [IE9]를 테스트 해 봅시다. 문제는 일부 필드가 전혀 검증되지 않았다는 것입니다.
실제로, 위의 예에서, 우리는 HTML5 검증과 NG의 자체 검증을 사용하여이를 결합했습니다. HTML5 검증을 지원하지는 않지만 NG의 무료 검증은 잘 실행됩니다. 솔루션은 매우 간단합니다. 패턴 매칭을 사용하여 이러한 상황을 해결하거나 검증 지침을 사용자 정의하여 검증 규칙을 다시 작성하거나 재정의 할 수 있습니다.
양식에 대한 브라우저의 기본 확인 동작 차단
양식 요소에 Novalidate 태그를 추가하십시오. 문제는 우리의 형태의 어떤 필드가 유효하고 어떤 것이 불법적이거나 유효하지 않은지 어떻게 알 수 있습니까? NG는 또한이를위한 훌륭한 솔루션을 제공합니다. 양식의 속성은 그에 속하는 $ SCOPE 객체에서 액세스 할 수 있으며 $ SCOPE 객체에 액세스 할 수 있으므로 JavaScript는 DOM의 양식 속성에 간접적으로 액세스 할 수 있습니다. 이러한 속성을 사용하면 양식에 실시간으로 응답 할 수 있습니다.
이러한 속성은 formname.inputfieldname.property 형식을 사용하여 액세스 할 수 있습니다.
수정되지 않은 양식
사용자가 양식을 수정했는지 여부를 나타내는 부울 속성. 그것이 ture 인 경우, 수정되지 않았 음을 의미합니다. 거짓은 수정되었음을 의미합니다.
코드 사본은 다음과 같습니다. formname.inputfieldName. $ ristine; 수정 된 양식
사용자가 실제로 양식을 수정 한 경우에만 부울 속성. 양식이 확인되었는지 여부에 관계없이 :
코드 복사는 다음과 같습니다. formname.inputfieldName. $ dirty
검증 된 양식
양식이 확인을 통과했는지 여부를 나타내는 부울 속성. 양식이 현재 검증 된 경우 사실입니다.
복사 코드는 다음과 같습니다. formname.inputfieldname. $ 유효한 사본 코드는 다음과 같습니다. formname.inputfieldname. $ invalid
마지막 두 속성은 DOM 요소를 디스플레이하거나 숨길 때 특히 유용합니다. 동시에 특정 클래스를 설정하려면 매우 유용합니다.
실수
이것은 AngularJS가 제공하는 또 다른 매우 유용한 속성입니다 : $ error 객체. 여기에는 현재 양식의 모든 검증 내용과 합법적인지에 대한 정보가 포함되어 있습니다. 다음 구문을 사용 하여이 속성에 액세스하십시오
코드 사본은 다음과 같습니다. formname.inputfieldName. $ error
확인이 실패하면이 속성의 값이 참입니다. 값이 False 인 경우 입력 필드의 값이 확인을 통과했음을 의미합니다.
아래에서 우리는이 검증 지침을 테스트합니다.
<! doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport"content = "width = width = device-width"/> <title> index </title> <link href = "~/css/bootstrap.min.css"rel = "script" src = "~/javaScript/angular.min.js"> </script> <style type = "text/css"> body {padding-top : 30px; }. ng-model = 'user.name'/> <span ng-show = "myform.name. $ dirty && myform.name. $ valid"> </span> </div> </div> <div> <div> <레이블 for = "minlength"> 2. 최소 길이 = 5 </label> </div> <div> <입력 유형 = "텍스트"id = "minlength"name = "minlength"ng-minlength = "5"ng-model = "user.minlength"/> <span ng-show = "myform.minlength .Minlength .Minlength .Minlength. for = "maxlength"> 3. maximum 길이 = 20 </label> </div> <div> <input type = "text"id = "maxlength"name = "maxlength"ng-model = "user.maxlength"ng-maxlength = "20"/> <span ng-show = "myform.maxlength && myform.maxlength. </div> <div> <div> <레이블에 대한 = "Pattern"> 4. 패턴 매칭 </label> </div> <div> <입력 유형 = "text"id = "pattern"name = "pattern"ng-model = "user.pattern"ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern. $ dirty && </div. <div> <label for = "이메일"> 5. 이메일 </label> </div> <div> <입력 유형 = "이메일"id id = "email"name = "email"ng-model = "user.email"/> <span ng-show = "myform.email. $ dirty && myform.email. $ valid"> </span> </div> </div> <라벨에 for = "Age"> 6. 번호 </label> </div> <div> <입력 유형 = "숫자"id = "age"name = "age"ng-model = "user.age"/> <span ng-show = "myform.age. $ dirty && myform.age. $ valid"> </div> </div> <div> < "url"> 7. id = "url"name = "url"ng-model = "user.url"/> <span ng-show = "myform.url. $ dirty && myform.url. $ valid"> </span> </div> <div> <input ng-disabled = "myform. $ invalid"type ""</div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> {{user.name}} $ fristine [수정되지 않음] : {{myform.name. $ irstine}} $ dirty [modified] : {{myform.name. $ dirty}} $ [검증 실패] : {{myform.name. $ invalid}} $ [verification succest]. {{myform.name. $ valid}} 필수 : {{myform.name. $ orror.required}} <br> 2. 최소 길이 = 5 : {user.minlength}} $ terristine [{myform.minlength. $ orstine}} $ modifified】 : {{myform.minlength. $ dirty}} $ invalid verification verification 실패】 : {myform.minlength. $ invalid}} $ invalid 【verification success】 : {{myform.minlength. $ valid}} $ error 【Error 세부 사항】 : {myform.minl 길이. $}}. 길이 = 20 : {{user.maxlength}} $ ristine 【【【】 : {{myform.maxlength. $ irstine}}} $ dirty 【수정 된】 : {{myform.maxlength. $ dirty}} $ invalid 【verification 실패 {myform.maxlength. $ invalid 【verificate verification 성공적인】 : {{myform.maxlength. $ valid}} $ error 【오류 세부 정보】 : {{myform.maxlength. $ error}} <br> 4. 패턴 일치 : {user.pattern}} $ pristine 【{myform.pattern. $ dirty ified modified】 : {{myform.pattern. $ dirty}} $ invalid 【verification 실패】 : {{myform.pattern. $ invalid}} $ invalid verification success】 : {{myform.pattern. $ invalid}} $ error eRRER 세부 사항 : {{myform.pattern. $ error}} <br> 5. 이메일 : {{user.eMail}} $ CRISTINE 【수정되지 않은】 : {{myForm.Email. $ fristine}} $ dirty 【수정 된】 : {{{{myform.email. $ dirty}} $ invalid】 : verification】 : {{myform.eMail. $ invalid}} $ invalid volid verificate verification incontice】 : {{myform.email. $ valid}} $ error error eror eror details】 : {myform.email. $ error}} <br> 숫자 : {{user.age}}} $ remistine 【{myform.ge}. $ dirty ified 수정 된】 : {{myform.age. $ dirty}} $ invalid 【verification 실패】 : {{myform.age. 7.url : {{user.url}} $ ristine 【【【】 : {{myform.url. $ fristine}} $ dirty 【modified】 : {{myform.url. $ dirty}} $ invalid 【verification 실패】 : {myform.url. {{myform.url. $ valid}} $ error 【오류 세부 사항】 : {{myform.url. $ error}} <br> </div> </body> </html> <script type = "text/javaScript"> Angular.Module ( 'myTest', []) .Controller ( 'mycontroller') $ scope.submitform = function (isvalid) {alert ( 'villification}); </script>;효과는 다음과 같습니다.
동시에 NG는 이러한 검증 지침에 대한 CSS 스타일을 목표로 삼는 방식으로 설정했습니다.
여기에는 다음이 포함됩니다.
코드 사본은 다음과 같습니다. .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * angular */. ng-invalid-required {} .ng-invalid-minlength {}.
양식 입력 필드의 특정 상태에 해당합니다.
예를 들어, 필드의 입력이 불법 인 경우 .ng-invlid 클래스 가이 필드에 추가됩니다. 좋아하는 CS를 편집 할 수 있습니다. 이러한 클래스를 개인적으로 사용자 정의하여 특정 시나리오 응용 프로그램을 구현할 수 있습니다.
그러나 기본 확인 지침은 실제 응용 프로그램 시나리오를 완전히 충족하지 못할 수 있으며 사용자 정의 검증 지침의 기능도 NG에서 제공합니다.
먼저 간단한 예를 살펴 보겠습니다.
Angular.Module ( "MyTest", []) .Directive ( 'MultipleAmail', [function () {return {return {return : "ngModel", 링크 : 함수 (스코프, 요소, attr, ngmodel) {if (ngmodel) {var emailsregexp = /^ (a-z0-9$%&'** ///=?^^{}} ~ .- the @=} varcentvalidator = function (value) {var valucty (value). ngmodel.HTML 페이지의 코드는 다음과 같습니다.
<form role = "form"id = "custom_form"name = "custom_form"novel_form "novel_form"invermindate> <div> <label> 다중 이메일 < /label> <div> <입력 다중 메일 이름 = "user_email"ng-model = "user.email"필수 자리 표시기 = "사용자 정의 확인, 다중 이메일 주소, 분할"; " /> 확인 : {custom.form. </div> </div> <div> <입력 ng-disabled = "custom_form. $ invalid"type = "제출"value = "제출"/> </div> </form>코드는 매우 간단하며 효과는 다음과 같습니다.
이 코드는 매우 간단하지만 NGModelController의 몇 가지 중요한 속성이 포함됩니다. $ viewValue
$ viewValue 속성은보기를 업데이트하는 데 필요한 실제 문자열을 보유합니다.
$ modelValue
$ modelValue는 데이터 모델에 의해 유지됩니다. $ parser 파이프 라인이 작동하는지 여부에 따라 $ modelValue 및 $ viewValue가 다를 수 있습니다.
$ parsers
$ parsers의 값은 함수로 구성된 배열입니다. 사용자가 컨트롤러와 상호 작용하고 ngmodelController의 $ setViewValue () 메소드가 호출되면 NGModelController의 함수는 사용자가 컨트롤러와 상호 작용할 때 하나씩 호출되며 NGModelController의 $ setViewValue () 메소드는 파이프 라인 형태의 $ 하나씩 호출됩니다. DOM에서 NGModel에 의해 읽은 값은 $ parsers의 함수로 전달 되며 구문 분석기에 의해 순서대로 처리됩니다. 이것은 값을 처리하고 수정하기위한 것입니다.
참고 : ngmodel. $ setViewValue () 함수는 범위의 뷰 값을 설정하는 데 사용됩니다.
ngmodel. $ setViewValue () 함수는 매개 변수를 수용 할 수 있습니다.
값 (문자열) : 값 매개 변수는 ngmodel 인스턴스에 할당하려는 실제 값입니다.
이 메소드는 컨트롤러의 로컬 $ viewValue를 업데이트하고 각 $ Parser 함수 (유효성 검사기 포함)로 값을 전달합니다. 값이 구문 분석되고 $ Parser 파이프 라인의 모든 기능이 호출되면 값은 $ ModelValue 속성에 할당되어 명령에서 NG- 모델 속성에 의해 제공된 표현식으로 전달됩니다. 마지막으로, 모든 단계가 완료되면 $ viewchangelisteners 의 모든 청취자가 호출됩니다. $ setViewValue () 만 호출하면 새로운 Digest 루프가 발생하지 않으므로 지침을 업데이트하려면 $ viewValue를 설정 한 후 다이제스트를 수동으로 트리거해야합니다. $ setViewValue () 메소드는 사용자 정의 지시문에서 사용자 정의 이벤트를 듣는 데 적합합니다 (예 : 콜백 기능이있는 jQuery 플러그인 사용)은 콜백이 호출 될 때 $ viewValue를 설정하고 Digest 루프를 실행하려고합니다.
$ Formatters
$ Formatters의 값은 데이터 모델의 값이 변경 될 때 파이프 라인 형태로 하나씩 호출되는 함수 배열입니다. $ parser 파이프 라인에는 영향을 미치지 않으며이 값 바운드를 사용하여 컨트롤로 값을 표시하고 변환하는 데 사용됩니다.
$ viewchangelisteners
$ viewchangelisteners의 값은보기의 값이 변경 될 때 파이프 라인 형태로 하나씩 호출되는 함수 배열입니다. $ viewchangelisteners를 사용하면 $ watch를 사용하지 않고도 비슷한 동작을 달성 할 수 있습니다. 반환 값이 무시되므로 이러한 함수는 값을 반환 할 필요가 없습니다.
$ 오류
$ 오류 객체는 확인 및 해당 오류 정보를 전달하지 않은 유효성 검사 이름을 보유합니다.
$ ristine
$ ristine의 값은 부울으로, 사용자가 컨트롤을 수정했는지 여부를 알려줄 수 있습니다.
$ Dirty
$ dirty의 값은 $ ristine의 반대이며, 이는 사용자가 컨트롤과 상호 작용했는지 여부를 알 수 있습니다.
$ 유효합니다
$ 유효한 값은 현재 제어에 오류가 있는지 여부를 알려줍니다. 오류가있을 때 값은 False이며 오류가 없으면 값이 참입니다.
무효
무효 값은 현재 제어에 하나 이상의 오류가 있는지 여부를 알려주고 그 값은 $ 유효한 반대입니다.
기본 지식 포인트를 학습 한 후에는 사용자 정의 검증의 글쓰기 방법을 깊이 배워야합니다. NG1.3 이후, 검증 지침의 사용 편의성이 개선되었습니다.
위는 편집자가 귀하에게 소개 한 AngularJS Verification 양식을 사용하는 예에 대한 자세한 설명입니다. 나는 그것이 당신을 도울 수 있기를 바랍니다. 앞으로 AngularJS 검증 양식에 대한 관련 지식을 계속 업데이트 할 것입니다. Wulin.com 웹 사이트에주의를 기울이십시오!