728x90
반응형
PHP ajax/jquery로 유효성 검사하기
PHP와 jQuery는 모두 웹 개발에서 유용한 언어 및 라이브러리입니다. 그러나 PHP는 서버 측 언어로 웹 페이지를 구성하는 HTML 코드를 동적으로 생성하거나 데이터베이스와 상호작용하는 등의 작업을 처리할 수 있는 언어입니다. 반면 jQuery는 클라이언트 측 라이브러리로, HTML 페이지 내에서 JavaScript를 이용하여 DOM(Document Object Model) 요소를 조작하고 이벤트를 처리하는 등의 작업을 단순하게 처리할 수 있도록 도와줍니다.
따라서 PHP와 jQuery는 각각 다른 분야에서 사용되며, 유효성 검사 또한 서로 다른 방식으로 처리됩니다. PHP는 서버 측에서 입력값을 검사하고, 문제가 있을 경우 오류 메시지를 출력하거나 다른 처리를 수행할 수 있습니다. 반면 jQuery는 클라이언트 측에서 입력값을 검사하며, 입력값이 유효하지 않은 경우 메시지를 출력하거나 다른 처리를 수행합니다.
이러한 이유로 jQuery를 이용한 유효성 검사는 사용자 경험을 향상시키는 데 도움이 됩니다. 예를 들어, 사용자가 입력한 값이 유효하지 않은 경우, 서버 측에서 오류 메시지를 처리하는 동안 사용자는 기다려야 하지만, 클라이언트 측에서 바로 유효성 검사를 수행하면 사용자는 즉시 오류 메시지를 확인하고 수정할 수 있습니다. 또한, 서버 측에서 유효성 검사를 수행하면 네트워크 트래픽이 발생하지만, 클라이언트 측에서 검사를 수행하면 네트워크 부하를 줄일 수 있습니다.
그러나 클라이언트 측에서 유효성 검사를 수행하는 경우, 보안에 취약할 수 있으므로 반드시 서버 측에서도 검사를 수행해야 합니다. 이를 통해 보안 취약점을 최소화하고, 더욱 안전한 웹 애플리케이션을 개발할 수 있습니다.
이름, 이메일 유효성 검사
코드 구성
<form action="joinResult.php" name="joinResult" method="post" onsubmit="return joinChecks()">
<fieldset>
<legend class="blind">회원가입 영역</legend>
<div>
<label for="youName" class="required">이름</label>
<input type="text" id="youName" name="youName" class="inputStyle" maxlength="5" placeholder="이름을 적어주세요!">
<p class="msg" id="youNameComment"><!--이름은 한글로만 작성할 수 있습니다.--></p>
</div>
<div class="over">
<label for="youEmail" class="required">이메일</label>
<input type="email" id="youEmail" name="youEmail" class="inputStyle" placeholder="이메일을 적어주세요!">
<a href="#c" class="youCheck" onclick="emailChecking()">이메일 중복 검사</a>
<p class="msg" id="youEmailComment"><!-- 사용 중인 이메일입니다. --></p>
</div>
<div class="over">
<label for="youNick" class="required">닉네임</label>
<input type="text" id="youNick" name="youNick" class="inputStyle" placeholder="닉네임을 적어주세요!">
<a href="#c" class="youCheck">닉네임 중복 검사</a>
<p class="msg" id="youNickComment"><!-- 사용 중인 닉네임입니다. --></p>
</div>
<div>
<label for="youPass" class="required">비밀번호</label>
<input type="password" id="youPass" name="youPass" class="inputStyle" placeholder="비밀번호를 적어주세요!">
<p class="msg" id="youPassComment"><!-- 특수기호, 숫자가 들어가야 합니다. --></p>
</div>
<div>
<label for="youPassC" class="required">비밀번호 확인</label>
<input type="password" id="youPassC" name="youPassC" class="inputStyle" placeholder="다시 한번 비밀번호를 적어주세요!">
<p class="msg" id="youPassCComment"><!-- 비밀번호가 일치하지 않습니다. --></p>
</div>
<div>
<label for="youBirth">생년월일</label>
<input type="password" id="youBirth" name="youBirth" class="inputStyle" placeholder="YYYY-MM-DD" maxlength="15">
<p class="msg" id="youBirthComment"><!-- 알맞는 형식의 생년월일을 입력해주세요. --></p>
</div>
<div>
<label for="youPhone">연락처</label>
<input type="text" id="youPhone" name="youPhone" class="inputStyle" placeholder="연락처를 적어주세요!(-포함)">
<p class="msg" id="youPhoneComment"><!-- 알맞는 형식의 연락처를 입력해주세요. --></p>
</div>
<button type="submit" class="btnStyle">회원가입 완료</button>
</fieldset>
</form>- form 태그를 사용하고 자식으로 label 태그와 input 태그를 사용해서 각각 형식에 맞게 입력해줍니다.
ajax/jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function joinChecks(){
//이름 유효성 검사
if($("#youName").val() == ''){
$("#youNameComment").text("* 이름을 입력해주세요.");
$("#youName").focus();
return false;
}
let getYouName = RegExp(/^[가-힣]+$/);
if(!getYouName.test($("#youName").val())){
$("#youNameComment").text("* 이름은 한글만 사용 가능합니다.");
$("#youName").val('');
$("#youName").focus();
return false;
}
// 이메일 유효성 검사
if($("#youEmail").val() == ''){
$("#youEmailComment").text("* 이메일을 입력해주세요!");
$("#youEmail").focus();
return false;
};
let getYouEmail = RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i);
if(!getYouEmail.test($("#youEmail").val())){
$("#youEmailComment").text("* 이름은 한글만 사용 가능합니다.");
$("#youEmail").val('');
$("#youEmail").focus();
return false;
};
};
</script>- 코드의 form 태그에 onsubmit를 입력하고 함수를 반환시켜주게끔 해줍니다.
- script 태그에 jquery 라이브러리 링크를 가져와 입력해줍니다.
- form 태그에 썼던 함수를 사용해줍니다.
- 먼저 // 이름 유효성 검사를 해줍니다. if문을 사용해서 태그의 이름 선택자를 가져와줍니다. jquery에서는 선택자를 불러오는데 따로 변수를 지정하지 않고 $( )를 사용해서 가져올 수 있습니다. 선택자를 가져와서 value 값을 가져오는데 만약 빈칸일 경우 comment 부분에 텍스트를 입력해주는데 jquery에서는 .text를 사용해서 더 간단하게 입력할 수 있습니다. 그리고 입력이 안됐을 경우 그 위치로 가기 위해 .focus( )를 사용해줍니다.
- 그리고 이름을 유효성 검사를 하기 위해 정규식 표현을 입력해줍니다. jquery에서 정규식 표현을 작성하기 위해서는 .RegExp( )를 사용해줍니다. 이름 유효성 검사의 정규식 표현은 /^[가-힣]+$/ 입니다. 그래서 if문을 사용해서 이름의 value 값이 정규식 표현에 맞지 않을 경우 text를 입력해주고 value 값을 빈칸으로 만들어주고 .focus( )를 사용해서 이동시켜줍니다.
- // 이메일 유효성 검사도 동일하게 해줍니다. 해주는데 태그이 이름 선택자를 이메일에 해당하는 부분으로 가져옵니다. 그리고 이메일 유효성 검사의 정규식 표현은 /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i 입니다. 이렇게 사용하면 php에서 사용했던 유효성 검사 방식보다 더 짧고 간결하게 작성 할 수 있는 것을 볼 수 있습니다.
728x90
반응형
