AngularJS 입력 확인
AngularJS 양식 및 컨트롤은 입력 데이터를 확인할 수 있습니다.
확인을 입력하십시오
이전 장에서는 AngularJS 양식 및 컨트롤에 대해 배웠습니다.
AngularJS 양식 및 컨트롤은 확인 기능을 제공하고 사용자가 입력 한 불법 데이터에 대해 경고 할 수 있습니다.
참고 : 클라이언트 확인은 사용자 입력 데이터의 보안을 보장 할 수 없으므로 서버의 데이터 확인도 필요합니다.
응용 프로그램 코드
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/angular.js/1.4.6/angular.min.js"> </script> </head> <h2> verification </h2> <mypat " ng-controller = "validatectrl"name = "myform"novalidate> <p> username : <br> <input type = "text"name = "user"ng-model = "user"require> <span style = "color : red"ng-show = "myform.user. $ dirty && my form.user"> ng-show = "myform.user. $ error.required"> 사용자 이름이 필요합니다. </span> </span> </p> <p> 이메일 : <br> <input type = "email"name = "email"ng-model = "email"필수> <span style = "color : red"ng-show = "myform.email. $ dirty && myform.email. </span> <span ng-show = "myform.email. $ error.email"> 불법 이메일 주소. </span> </span> </p> <p> <입력 유형 = "제출"ng-disabled = "myform.user. $ dirty && myform.user. $ invalid || myform.email. $ dirty && myform.email. []); app.controller ( 'validatectrl', function ($ scope) {$ scope.user = 'John doe'; $ scope.email = '[email protected]';}); </script> </body> </html>실행 결과 :
검증 예
사용자 이름 :
우편:
참고 : HTML 양식 속성 Novalidate는 브라우저 기본 확인을 비활성화하는 데 사용됩니다.
예제 분석
Angularjs ng- 모델 지침은 입력 요소를 모델에 바인딩하는 데 사용됩니다.
모델 객체에는 사용자와 이메일의 두 가지 속성이 있습니다.
우리는 NG-SHOW 지시 사항 인 Color : Red가 메시지가 $ dirty 또는 $ invalid 인 경우에만 표시됩니다.
| 재산 | 설명하다 |
|---|---|
| $ Dirty | 양식을 작성하기위한 기록이 있습니다 |
| $ 유효합니다 | 필드 내용은 합법적입니다 |
| 무효 | 필드 내용은 불법입니다 |
| $ ristine | 양식에 기록되지 않았습니다 |
위는 AngularJS 입력 검증 정보의 편집입니다. 우리는 나중에 계속 보충 할 것입니다. 공부하는 학생들을 도울 수 있기를 바랍니다.