- Vue2
- AntDv 1.7.8
antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다
Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다
antd에서 기본으로 제공하는 type은 다음과 같다
type = "email"
⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!)
그러면 이번엔 기본으로 제공해주는 validator 이외에 custom한 validator를 만들어보자
만약 ip 주소의 유효성을 검사하려한다고 해보자
이런식으로 regexp 속성을 사용해도 되긴하지만 정규식이 너무 길면 코드가 못생겨진다
그래서 validator API를 사용해보려 한다
일단 함수를 연결해준다
함수 형태는 다음과 같이 작성한다
(여기서 IPValid는 정규식에 맞으면 true를 return 하는 일반적인 정규식함수이다)
console을 찍어보면 ⬆️이런식으로 나오는데 파라미터 정보는
- rule : 해당 validator가 작성된 rule의 객체정보
- value: 해당 input에 들어있는 value
- callback: 콜백함수로, 파라미터에 공백을 입력해서 실행하면 통과, string을 넣으면 미통과라고 생각하면 된다
console에 이 callback함수 안에 파라미터로 넣은 string이 warning으로 찍히는데 production mode에서는 안나온다고 하니 신경 안써도 되겠다
히히 된당 ..
이런식으로 has-feedback이나 allow-clear 옵션을 붙혀서 더 꾸밀 수도 있다
- has-feedback : 폼 오른쪽 끝에 동그라미 안에 체크, 에러 표시
- allow-clear : clear 버튼 표시