폼 값 유효성 검증 jquery.validate.js

이번에는 폼 유효성 검증, form validation 에 대해서 알아보겠습니다.

회원가입 페이지에서 아이디, 암호, 이메일 등을 입력하고, 서버쪽으로 정보를 전송하게 되지요. 만일 이때, 제대로된 이메일 주소의 형태를 가지지 않는 입력값이다던지, 요구한 형태에 맞지 않은 정보가 포함되어 있으면 어떻게 처리하는 것이 좋을까요?

우선 클라이언트쪽에서도 값들을 서버로 전송하기 전에 검증을 해보고, 서버 측에서도 다시 검증을 하고 처리후, DB에 저장을 해야겠지요.

서버쪽 부담을 덜어준다는 의미에서도 클라이언트쪽에서의 폼 유효성 검증은 필요한 작업입니다.

클라이언트쪽에서 돌아가는 프로그램은 자바스크립트죠. 서버는 PHP...

간단하게 아래의 회원가입 폼이 있다고 가정합시다.

<form class="form-signup" name="form_signup" id="form_signup" method="post" action="./signup_check.php" >         <h2 class="form-signup-heading">SIGN UP</h2>         <label>아이디</label>         <input type="text" name="user_id" id="user_id" class="input-block-level" placeholder="아이디">         <label>비밀번호</label>         <input type="password" name="user_pass" id="user_pass" class="input-block-level" placeholder="비밀번호">         <label>비밀번호 확인</label>         <input type="password" name="user_pass2" id="user_pass2" class="input-block-level" placeholder="비밀번호 확인">         <label>이메일주소</label>         <input type="text" name="user_email" id="user_email" class="input-block-level" placeholder="이메일주소">         <button type="submit" class="btn btn-large btn-primary">가입</button>     </form>

자바스크립트로 form_signup 내에 있는 user_email 의 값을 조사해서 제대로된 이메일주소 형태인지 조사를 할 수 있겠지요.

이렇게 검증해봐야할 값들이 많으면, 코드 작성하기가 귀찮아집니다.ㅋ

그래서, jquery.validate.js 를 이용해서 폼 값 유효성 검증을 하는 방법을 사용하고자합니다.

github 에 관련 프로젝트가 존재합니다.

https://github.com/jzaefferer/jquery-validation

다운받아서 jquery-validate.js 만 이용합니다.

첫째, 페이지에서 위 js 파일을 포함시킵니다.

그리고, 유효성 검증에 사용할 규칙을 작성해 줍니다.

<script type="text/javascript"> (function($){     $(document).ready(function() {     $('#form_signup').validate({             rules: {                 user_id: { required: true, minlength: 3 },                 user_pass: { required: true },                 user_pass2: { equalTo: "#user_pass" },                 user_email: { required: true, email: true },             },             messages: {                 user_id: {                     required: "아이디를 입력하시오.",                     minlength: jQuery.format("아이디는 {0}자 이상")                 },                 user_pass: { required: "암호를 입력하시오." },                 user_pass2: { equalTo: "암호를 다시 확인하세요." },                 user_email: {                                     required: "이메일주소를 입력하시오.",                                     email: "올바른 이메일주소를 입력하시오."                                 },             },             submitHandler: function (frm) {                 frm.submit();             },             success: function (e) {             //             }         });     }); })(jQuery); </script>

빨간 색으로 표시한 것은 검증할 form 의 아이디입니다. 해당폼의 아이디를 위처럼 작성하고, rules와 messages를 작성해주면 됩니다.

파란색으로 표시한 것들은 입력폼에서 각 input 필드의 아이디입니다.

required : 반드시 입력해야하는지 여부, true일 경우 반드시 입력!

minlength: 최소 문자 수

equalTo : 값이 같아야하는 입력필드의 아이디 지정

email: true 입력하는 내용이 이메일주소의 형태를 가져야함을 지정

message에는 rule에 맞지않아 검증결과 실패일 경우, 나타낼 메세지 입니다.

각각의 룰이 실패할 경우, 표시할 메세지를 지정해 줍시다.

사용하기가 그다지 어렵지 않습니다.

테스트해 봅시다.

부트스트랩스러운 회원가입 모습이죠? ㅎ

아무것도 입력하지 않고 [가입]버튼을 눌렀더니, 위 그림처럼 "아이디를 입력하시오" 등의 메시지가 나타났습니다.

룰을 만족하지 못하면, submit 이 되지 않습니다.

shadow 카테고리에서 만들어보고 있는 회원가입폼에도 적용을 해 봐야겠습니다.

추가내용!

회원가입할 때, 아이디는 단지 입력했다 안했다, 문제가 아니라, 유일해야하는 값이죠. 그래서, 유효한 값이 되기위해서는 실시간으로 서버측에 확인을 할 수 있어야 지금 입력하고 있는 아이디를 사용할 수 있다 없다를 검증할 수 있겠습니다.

jquery.validate.js 를 들여다보니, 이것을 할 수 있는 기능이 있더군요.

rules 에 user_id 부분을 다음과 같이 작성을 합니다.

user_id: { required: true, minlength: 3 },

를

user_id: {require: true, minlength: 3, remote: {type: "post", url:"check_user_id.php" } },

로 수정합니다.

messages 부분도 수정을 합니다.

user_id: {                     required: "아이디를 입력하시오.",                     minlength: jQuery.format("아이디는 {0}자 이상"),                     remote : jQuery.format("{0}는 이미 있는 아이디입니다.")                 },

check_user_id.php에게 조회해 본 결과를 토대로 메세지를 출력합니다.

그리고, 서버쪽에 check_user_id.php를 만들어야겠군요. validator 가 서버쪽에 user_id 의 유효성 여부를 물어보면 그 결과를 처리할 파일입니다.

<?php require_once $_SERVER['DOCUMENT_ROOT'].'/preset.php'; ?> <?php $q = "SELECT * FROM ap_member WHERE id='$user_id'"; $result = $mysqli->query( $q); if($result->num_rows==0) {     echo 'true'; } else {     echo 'false'; } ?>

위 코드는 shadow 카테고리에서 만들어보고 있는 파일에 적용한 모습입니다. DB에서 user_id 가 존재하는지 검색해보고, 존재하지 않으면, 사용해도 좋다고 validator에게 true를 전달합니다. echo 를 사용함을 주의하세요.

회원가입시에 아이디를 입력하면 곧바로 사용가능한지 확인할 수 있게 되었습니다.