[JavaScript #9] Validate 정리 (중복, 필수값 체크)

■ Validate 정리 (중복, 필수값 체크)

validate.js를 이용한 validate check 방법에 대해 정리하겠습니다.

https://validatejs.org/#validate-js

 

● validate.js 추가

 

먼저 validate 라이브러리를 사용하기 위해 js파일을 추가해야 합니다.

 

해당 CDN주소를 직접 참고하거나 다운로드 후 경로를 추가하면 됩니다. 

 

아래와 같이 추가해주시면 라이브러리 준비는 끝납니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"></script>

 

● validate check code

 

간단한 예제와 함께 사용법을 정리하겠습니다.

 

먼저 아래와 같이 간단한 html의 회원가입 form을 먼저 작성합니다.

<!-- Sample 회원가입 Form --> <form id = "myForm">   <div class="form-group">     <label>ID</label>     <input type="text" name="id">   </div>   <div class="form-group">     <label>Password</label><br />     <input type="password" name="password">   </div>   <div class="form-group">     <label>Password Check</label><br />     <input type="password" name="passwordCheck">   </div>   <button type="submit">JOIN</button><br /> </form>

위와 같이 간단하게 form을 만들면 아래와 같은 모습이 나올거에요.

 

input type을 password로 줘야지만 값이 화면에 노출되지 않습니다.

이제 여기에 validate.js 라이브러리를 활용한 script 코드를 작성해보겠습니다.

 

ID항목은 필수값 체크 그리고 중복체크를 하도록 하겠습니다.

 

그리고 Password 항목은 필수값 체크와 Password Confirm과 값이 같은지 확인하도록 하겠습니다.

// Sample 회원가입 Form Validate Check <script> $(document).ready(function () {     $("#myForm").validate({         rules: {             id: {                 required: true,                 remote: {                     url: "/isDuplicated",                     type: "POST",                     data: {                         id: function () {                             return $('input[name="id"]').val();                         }                     }                 }             },             password: {                 required: true             },             passwordConfirm: {                 required: true,                 equalTo: "input[name='password']"             }         },         messages: {             id: {                 remote: 'This id is duplicated! please use another id.'             },             passwordConfirm: {                 equalTo: 'please enter the same password again.'             }         },         submitHandler: function () {             $.ajax({                 url: "/join",                 type: "POST",                 dataType: "text",                 data: $("#myForm").serialize(),                 success: function () {                     alert("success")                 },                 error: function () {                     alert("fail");                 }             })         }     }); }); </script>

사용법은 위의 코드와 같습니다.

 

rules에 적용한 규칙을 체크하고, 통과하지 못할 시 에러 메시지를 보여줍니다.

 

required는 필수 값 체크이며, equalTo는 값이 지정한 값과 똑같은지를 체크합니다.

 

그리고 id에 있는 remote는 input창의 변화가 생길 때 해당 함수를 호출합니다.

 

여기서는 함수의 리턴값을 true / false로 구분합니다

 

true일 경우 통과, false일 경우 에러 메시지를 발송합니다. 이 코드에서는 id 중복체크를 위해 사용되었습니다.

 

즉 서버의 /isDuplicated api는 true / false를 리턴하도록 구현했습니다.

 

messages는 기본으로 설정된 에러메시지 외의 다른 메시지를 출력하고 싶을 때 설정합니다.

 

그리고 submitHandler를 통해 성공 시 수행할 함수를 작성합니다. 여기서는 회원가입을 예시로 들었기 때문에

 

ajax로 /join api를 호출합니다.

 

완료되었으면 이제 join 버튼을 눌러 validate 체크가 정상적으로 되는지 확인합니다. 

 

결과는 아래 이미지와 같습니다.

 

그럼 이상으로 javascript에서 validate라이브러리 사용하는 방법에 대한 정리를 마치겠습니다.

 

감사합니다.