PHP ajax와 유효성검사 하기
PHP Ajax는 PHP와 Ajax를 함께 사용하여 동적 웹 페이지를 만드는 기술입니다.
PHP는 서버 측 스크립트 언어로, 데이터베이스와 상호 작용하고 동적인 콘텐츠를 생성할 수 있습니다.
Ajax는 Asynchronous JavaScript and XML의 약자로, 비동기적인 웹 응용 프로그램을 만드는 데 사용됩니다. Ajax를 사용하면 웹 페이지가 다시로드되지 않고도 서버로부터 데이터를 가져와 사용자와 상호 작용할 수 있습니다.
PHP Ajax를 사용하면 웹 페이지를 보다 동적으로 만들 수 있습니다.
예를 들어, 사용자가 폼을 제출하면 PHP Ajax는 서버로 데이터를 전송하고, 서버는 해당 데이터를 처리한 후 결과를 클라이언트에게 반환합니다.
이 결과를 클라이언트에서 받아와 웹 페이지의 특정 부분을 업데이트할 수 있습니다. 이러한 방식으로, 페이지를 다시 로드하지 않고도 새로운 정보를 가져와 보여줄 수 있습니다.
PHP ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let isEmailCheck = false;
function emailChecking(){
let youEmail = $("#youEmail").val();
if(youEmail == null || youEmail == ''){
$("#youEmailComment").text("* 이메일을 입력해주세요!");
} else {
$.ajax({
type : "POST",
url : "joinCheck.php",
data : {"youEmail": youEmail, "type": isEmailCheck},
dataType : "json",
success : function(data){
if(data.result == "good"){
$("#youEmailComment").text("사용 가능한 이메일입니다.");
isEmailCheck = true;
} else {
$("#youEmailComment").text("이미 존재하는 이메일입니다.")
isEmailCheck = false;
}
}
error : function(request, status, error){
console.log("request: " + request);
console.log("status: " + status);
console.log("error: " + error);
}
})
}
}
let isEmailCheck = false; : 이메일 중복 확인 결과를 저장할 변수를 선언하고, 초기값으로 false를 할당합니다.
function emailChecking() { : 이메일 중복 확인 함수를 정의합니다.
let youEmail = $("#youEmail").val(); : HTML에서 id가 "youEmail"인 요소의 값을 가져와 youEmail 변수에 저장합니다.
if(youEmail == null || youEmail == '') { : youEmail 값이 null이거나 비어있는 경우, "이메일을 입력해주세요!" 메시지를 출력합니다.
$.ajax({ : jQuery Ajax 요청을 보냅니다.
type : "POST", : Ajax 요청 방식을 POST로 설정합니다.
url : "joinCheck.php", : Ajax 요청을 보낼 URL을 지정합니다.
data : {"youEmail": youEmail, "type": isEmailCheck}, : Ajax 요청에 전송할 데이터를 설정합니다. youEmail 변수와 isEmailCheck 변수를 전송합니다.
dataType : "json", : Ajax 요청 결과를 JSON 형식으로 받아옵니다.
success : function(data) { : Ajax 요청이 성공했을 때 실행할 함수를 정의합니다.
if(data.result == "good") { : Ajax 요청 결과에서 result 값이 "good"인 경우, "사용 가능한 이메일입니다." 메시지를 출력하고 isEmailCheck 값을 true로 변경합니다.
} else { : 그렇지 않은 경우, "이미 존재하는 이메일입니다." 메시지를 출력하고 isEmailCheck 값을 false로 변경합니다.
error : function(request, status, error) { : Ajax 요청이 실패했을 때 실행할 함수를 정의합니다.
console.log("request: " + request); : 콘솔에 request 변수를 출력합니다.
console.log("status: " + status); : 콘솔에 status 변수를 출력합니다.
console.log("error: " + error); : 콘솔에 error 변수를 출력합니다.
}) : Ajax 요청 설정을 종료합니다.
} : 이메일 중복 확인 함수를 종료합니다.
이 코드는 이메일 중복 확인을 위해 서버로 Ajax 요청을 보내고, 결과를 받아와 화면에 출력하는 기능을 구현한 예시입니다.
Ajax를 사용하면 화면의 일부분만 업데이트할 수 있어서 웹 페이지의 속도와 효율성을 높일 수 있습니다.
유효성 검사
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;
}
}함수 내부에는 두 가지 검사가 수행됩니다. 첫 번째 검사는 이름 유효성 검사입니다. 이름 필드가 비어 있으면 #youNameComment 요소에 "* 이름을 입력해주세요!" 메시지가 표시됩니다.
그렇지 않으면 RegExp() 함수를 사용하여 입력된 이름이 한글로만 이루어졌는지 확인합니다. 한글로만 이루어진 이름이 아니면 #youNameComment 요소에 "* 이름은 한글만 사용 가능합니다." 메시지가 표시됩니다.
두 번째 검사는 이메일 유효성 검사입니다. 이메일 필드가 비어 있으면 #youEmailComment 요소에 "* 이메일을 입력해주세요!" 메시지가 표시됩니다. 그렇지 않으면 RegExp() 함수를 사용하여 입력된 이메일 주소가 유효한 형식인지 확인합니다. 유효하지 않은 이메일 주소가 입력되면 #youEmailComment 요소에 "* 이메일을 형식에 맞게 입력해주세요!" 메시지가 표시됩니다.
검사 결과 유효하지 않은 값이 입력되면 해당 필드로 커서가 이동하도록 focus() 함수를 사용합니다. 마지막으로 return false를 통해 검사를 중단하고 유효성 검사 결과가 false임을 알립니다.