AngularJS와 입력 검증
AngularJS와 폼과 컨트롤은 데이터 입력의 유효성을 검사 할 수 있습니다.
입력 유효성 검사
이전 섹션에서는 AngularJS와 폼과 컨트롤에 대한 지식을 배웠습니다.
AngularJS와 폼과 컨트롤 유효성 검사 기능과 사용자 경고가 입력 한 불법 데이터를 제공 할 수 있습니다.
 | 클라이언트, 사용자 데이터 입력의 보안을 보장 할 수 있는지 확인 데이터 검증 서버가 필요하다. |
|---|
응용 프로그램 코드
<! DOCTYPE html로>
<HTML>
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<바디>
<H2> 유효성 검사 예 </ H2 >
<양식 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "validateCtrl"
이름 = "myForm을"NOVALIDATE>
<P> 아이디 :로 <br>
<입력 유형 = "텍스트"이름 = "사용자"NG 모델 = "사용자"가 필요합니다>
<스팬 스타일 = "색상 : 빨강 "NG 쇼 = ".. MyForm.user $ 더러운 && myForm.user의 $ 무효">
<스팬 NG 쇼 = "myForm.user . $ Error.required은"> 사용자 이름이 필요합니다. </ SPAN>
</ SPAN>
</ P>
<P> 이메일 :로 <br>
<입력 유형 = "이메일"이름 = "이메일"NG 모델 = '이메일'요구>
<스팬 스타일 = "색상 : 빨강 "NG 쇼 = ".. MyForm.email $ 더러운 && myForm.email $ 무효">
<스팬 NG 쇼 = "myForm.email . $ Error.required은"> 사서함은 필수입니다. </ SPAN>
<스팬 NG-쇼 = "myForm.email . $ Error.email"> 불법 사서함. </ SPAN>
</ SPAN>
</ P>
<P>
<입력 유형 = "제출"
= "myForm.user. $ NG 장애인 더러운 && myForm.user. 잘못된 $ ||
myForm.email. $ 더러운 && myForm.email. $ 무효 ">
</ P>
</ FORM>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'validateCtrl', 기능 ($ 범위) {
$ Scope.user = '홍길동';
$ Scope.email = '[email protected]';
});
</ 스크립트>
</ BODY>
</ HTML>
<HTML>
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<바디>
<H2> 유효성 검사 예 </ H2 >
<양식 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "validateCtrl"
이름 = "myForm을"NOVALIDATE>
<P> 아이디 :로 <br>
<입력 유형 = "텍스트"이름 = "사용자"NG 모델 = "사용자"가 필요합니다>
<스팬 스타일 = "색상 : 빨강 "NG 쇼 = ".. MyForm.user $ 더러운 && myForm.user의 $ 무효">
<스팬 NG 쇼 = "myForm.user . $ Error.required은"> 사용자 이름이 필요합니다. </ SPAN>
</ SPAN>
</ P>
<P> 이메일 :로 <br>
<입력 유형 = "이메일"이름 = "이메일"NG 모델 = '이메일'요구>
<스팬 스타일 = "색상 : 빨강 "NG 쇼 = ".. MyForm.email $ 더러운 && myForm.email $ 무효">
<스팬 NG 쇼 = "myForm.email . $ Error.required은"> 사서함은 필수입니다. </ SPAN>
<스팬 NG-쇼 = "myForm.email . $ Error.email"> 불법 사서함. </ SPAN>
</ SPAN>
</ P>
<P>
<입력 유형 = "제출"
= "myForm.user. $ NG 장애인 더러운 && myForm.user. 잘못된 $ ||
myForm.email. $ 더러운 && myForm.email. $ 무효 ">
</ P>
</ FORM>
<스크립트>
var에 응용 = angular.module ( '을 myApp', []);
app.controller ( 'validateCtrl', 기능 ($ 범위) {
$ Scope.user = '홍길동';
$ Scope.email = '[email protected]';
});
</ 스크립트>
</ BODY>
</ HTML>
»시도
| HTML 양식은 브라우저의 기본 유효성 검사를 비활성화하는 NOVALIDATE 속성. |
|---|
분석의 예
AngularJS와 NG 모델 명령은 모델에 입력 요소를 결합하는 데 사용됩니다.
사용자 이메일 : 모델 객체는 두 가지 속성이 있습니다.
메시지의 빨간색 만 $ 더럽거나 $ 잘못 표시입니다 : 우리는 NG-show 명령, 색상 사용할 수 있습니다.
| 재산 | 기술 |
|---|---|
| $ 더러운 | 기록을 작성하는 형태가있다 |
| $ 유효한 | 필드 내용 합법적 인 |
| $ 잘못된 | 이 필드의 내용은 불법 |
| $ 깨끗 | 어떤 형태의 기록을 작성 없습니다 |