PHP와 AJAX를 사용하여 유효성 검사하기

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약어로, 비동기식 자바스크립트와 XML을 이용하여 웹 페이지를 동적으로 갱신하는 기술입니다.

 

이 기술은 페이지 전체를 새로고침하지 않고도 서버로부터 데이터를 요청하고, 받은 데이터를 이용하여 웹 페이지의 일부분을 동적으로 변경하거나 업데이트할 수 있도록 합니다. 이를 통해 사용자 경험을 향상시키고, 불필요한 네트워크 트래픽을 줄일 수 있습니다.

 

AJAX는 XMLHttpRequest 객체를 사용하여 서버와 비동기식으로 통신합니다. 이 객체를 사용하여 서버에 데이터를 요청하고, 받은 데이터를 처리할 수 있습니다. AJAX는 XML 뿐만 아니라 JSON, HTML, 텍스트 등 다양한 데이터 형식을 처리할 수 있습니다.

 

AJAX는 현재 많은 웹 애플리케이션에서 사용되고 있으며, 예를 들어 구글 맵, 페이스북 등 많은 사이트에서 사용되고 있습니다.

 

---

PHP와 AJAX를 사용하여 유효성 검사를 수행하는 방법

 

ex

1. HTML 폼 생성

우선 HTML 폼을 생성합니다. 폼 필드에 대한 유효성 검사를 수행해야 합니다. 예를 들어, 이메일 주소와 비밀번호를 입력할 수 있는 두 개의 폼 필드가 있다고 가정합니다.

 

<form id="myForm">
  <input type="text" name="email" id="email">
  <input type="password" name="password" id="password">
  <input type="submit" value="Submit">
</form>

 

2. JavaScript 함수 생성

다음으로 JavaScript 함수를 생성합니다. 이 함수는 AJAX를 사용하여 서버로 데이터를 전송하고 응답을 받아서 처리합니다.

 

function submitForm() {
  // 폼 필드에서 데이터 가져오기
  var email = document.getElementById("email").value;
  var password = document.getElementById("password").value;

  // 유효성 검사 수행
  if (email == "" || password == "") {
    alert("모든 필드를 입력하세요.");
    return false;
  }

  // AJAX 요청 보내기
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 서버 응답 처리
      alert(xhr.responseText);
    }
  };
  xhr.send("email=" + email + "&password=" + password);
}

 

3. PHP 파일 생성

마지막으로 PHP 파일을 생성하여 폼 데이터를 처리합니다. 이 파일은 AJAX 요청을 수신하고 폼 필드에서 데이터를 읽어서 유효성 검사를 수행합니다.

 

<?php
// 폼 데이터 가져오기
$email = $_POST["email"];
$password = $_POST["password"];

// 유효성 검사 수행
if (empty($email) || empty($password)) {
  echo "모든 필드를 입력하세요.";
} else {
  // 유효한 데이터 처리
  // ...
  echo "성공적으로 처리되었습니다.";
}
?>

이제 HTML 폼을 작성하고 JavaScript 함수와 PHP 파일을 생성하여 유효성 검사를 수행할 수 있습니다.

 

---

오늘 배운 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 : "jounCheck.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);
                }
            })
        }
    }

1. jquery.min.js 파일을 스크립트로 가져오고, emailChecking() 함수가 정의되어 있습니다. 이 함수는 이메일 주소를 입력받아서 서버로 AJAX 요청을 보냅니다.
2. $("#youEmail").val() 코드를 사용하여 이메일 입력 필드에서 값을 가져옵니다. 그리고 이 값을 youEmail 변수에 저장합니다.
3. if 조건문을 사용하여 youEmail 값이 비어있는지 확인합니다. 비어있다면 이메일을 입력하라는 안내 메시지를 표시하고, 그렇지 않으면 AJAX 요청을 보냅니다.
4. $.ajax() 함수를 사용하여 AJAX 요청을 보냅니다. 이 함수는 다음과 같은 인자를 받습니다.

• type : 요청 메서드 (GET 또는 POST)
• url : 요청을 보낼 URL
• data : 서버로 보낼 데이터 (객체 형태로 전달)
• dataType : 서버로부터 받을 데이터 형식 (JSON, HTML, XML 등)
• success : 요청이 성공적으로 완료된 경우 실행할 함수
• error : 요청이 실패한 경우 실행할 함수

 

5. data 객체에는 이메일 주소와 type 변수가 전달됩니다. type 변수는 이메일 중복 검사를 할 때 이전에 검사를 했는지 여부를 나타내는 변수입니다.

6. success 함수는 서버로부터 받은 데이터를 처리합니다. 서버는 JSON 형식으로 응답을 보내므로, dataType을 "json"으로 설정하여 처리합니다.

7. 서버로부터 받은 데이터에는 result 변수가 포함되어 있습니다. 이 변수의 값에 따라서 이메일 중복 검사 결과를 표시합니다.

8. 마지막으로 error 함수는 요청이 실패한 경우 실행됩니다. 이 함수는 request, status, error 변수를 인자로 받으며, 각각 요청 객체, 상태 코드, 에러 메시지를 나타냅니다. 이를 console.log() 함수를 사용하여 콘솔에 출력합니다.

 

 

 

유효성 검사

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;
    }
}

1. 이름 필드(#youName)의 값이 비어있는지 확인하고, 비어있다면 이름을 입력하도록 안내 메시지를 표시합니다.
2. 이름이 한글이 아닌 경우에도 안내 메시지를 표시합니다.
3. 이메일 필드(#youEmail)의 값이 비어있는지 확인하고, 비어있다면 이메일을 입력하도록 안내 메시지를 표시합니다.
4. 이메일이 올바른 형식인지 확인하고, 형식에 맞지 않는 경우에도 안내 메시지를 표시합니다.
5. 이름과 이메일 모두 검사 후, 어느 하나라도 유효하지 않은 경우에는 return false를 사용하여 함수를 종료합니다.