- angularjs는 client-side에서 간단한 validation을 제공한다.
1.required
input form에서 값을 입력했는지 검사한다.
<input type="text" required />
값을 입력하지 값을 입력하라는 pop-over가 나타난다.
2.min-length, max-lenght
각각 최소글자수와 최대 글자수를 설정 할 수 있다.
<input type="text" ng-minlength=5 />
<input type="text" ng-maxlength=10 />
3. 정규식 검사 pattern검사
ng-pattern="/PATTERN/": 의 형식으로 사용하며 패턴에 정규식을 대입하여 검사 할 수 있다.
<input type="text" class="form-control" ng-pattern="/^[\d가-힣A-Za-z]+$/">
위와 같이 사용하면 한글과 영어만 입력이 가능하다.
4. E-mail , Number
input name을 email로 설정하면 email 주소가 맞는 지 검사 할 수 있다.
<input type="email" name="email" ng-model=" " />
type을 number로 하게 되면 숫자가 포함되었는지 검사한다.
<input type="number" name="email" ng-model=" " />
5. Url
입력값이 url 형식인지 검사한다.
<input type="url" name="homepage" ng-model=" " />
6. valid form , invalid form
boolean형으로 valid form은 결과가 true이면 true를 반환하고 invalid form은 결과가 false일때 true를 반환 한다.
다음과 같이 조건식에서 사용 할 수 있다.
formName.inputFieldName.$valid -> form의 input이 true이면 결과는 true
alert(formName.inputFieldName.$valid); 를 하면 true가 출력된다.
반대로 $invalid를 사용 했다면 false일경우 true가 반환되기 때문에 필수 입력 화면에서 입력값이 없다거나 할 경우 사용자에게 보여주는것 등에 응용 할 수 있다.
ex) <span ng-show="userId">아이디를 입력하세요</span>
<script>
if(signUp.userId.$invalid){
$scope.userId = true; // hidden 상태인 span을 출력
}
</script>
7. Errors
모든 validation에서 false 면 true를 반환한다.
formName.inputfieldName.$error
ex)
if ( !$scope.memberForm.pwd1.$error.minlength){
//비밀번호가 최소길이 이상일 경우 -> 참일 경우
}
