jQuery와 Ajax를 사용하여 PHP에서 이메일 주소를 확인하는 방법은 무엇입니까?

원래 게시된 @https://codeanddeploy.com 방문하여 샘플 코드 다운로드: https://codeanddeploy.com/blog/php/how-to-validate-email-address-in-php-with-jquery-ajax

이메일 주소를 데이터베이스에 저장하기 전에 유효성을 검사하는 방법에 대해 생각하고 있습니까? 이 예에서는 이메일 주소로 직원을 추가하는 것이 쉽습니다. 그러나 제출된 이메일 주소가 유효하지 않은 경우 사용자에게 메시지를 표시해야 합니다.



따라서 먼저 functions.php를 만들고 앱에서 재사용할 수 있는 모든 기능을 여기에 코딩합니다. 따라서 여기에 이메일 유효성 검사기 기능을 추가하여 isEmail 기능으로 호출한 다음 preg_match를 사용하여 이메일 주소 문자열을 확인합니다.

<?php

    function isEmail($email) 
    {
        return (!preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $email)) ? FALSE : TRUE;
    }

?>

그런 다음 직원 기록을 저장하는 데 사용하는 save.php 함수를 사용합니다. 다음은 이 파일에 functions.php를 이미 포함시킨 예입니다. 이 파일의 기본 코드 아래를 확인하십시오.

<?php require_once 'functions.php';?>

<?php

    $request = $_REQUEST; //a PHP Super Global variable which used to collect data after submitting it from the form
    $email = $request['email']; //get email address value

    // Check if no errors
    if(isEmail($email)):
        // Do something here
    else://display errors
        // Do something here
    endif;

?>

보시다시피 functions.php 파일을 포함하기 위해 require_once가 있습니다. 그런 다음 위에서 만든 isEmail 함수를 호출합니다. 그런 다음 제출된 이메일이 유효한 경우 if 문을 사용하여 이메일을 확인하십시오.

이제 save.php 파일의 전체 소스 코드를 보여드리겠습니다.

<?php require_once 'functions.php';?>

<?php
    $request = $_REQUEST; //a PHP Super Global variable which used to collect data after submitting it from the form
    $email = $request['email']; //get email address value
    $first_name = $request['first_name']; //get first name value
    $last_name = $request['last_name']; //get last name value
    $address = $request['address']; //get address value

    $servername = "localhost"; //set the servername
    $username = "root"; //set the server username
    $password = ""; // set the server password (you must put password here if your using live server)
    $dbname = "demos"; // set the table name

    // Defined $result as array
    $result = [];


    // Check if no errors
    if(isEmail($email)):
        $mysqli = new mysqli($servername, $username, $password, $dbname);

        if ($mysqli->connect_errno) {
          $result['response'] = "Failed to connect to MySQL: " . $mysqli->connect_error;
          exit();
        }

        // Set the INSERT SQL data
        $sql = "INSERT INTO employees (email, first_name, last_name, address)
        VALUES ('".$email."', '".$first_name."', '".$last_name."', '".$address."')";

        // Process the query so that we will save the date of birth
        if ($mysqli->query($sql)) {
          $result['response'] = "Employee has been created.";
        } else {
          $result['response'] = "Error: " . $sql . "<br>" . $mysqli->error;
        }

        // Close the connection after using it
        $mysqli->close();

    else://display errors
        $result['has_error'] = 1;
        $result['response'] = "Email address is invalid.";
    endif;


    echo json_encode($result);


?>

위의 코드에서 볼 수 있듯이 결과를 $result라는 배열에 저장합니다. 그런 다음 오류 표시 주석 아래에 has_error key =1을 추가하여 자바스크립트에 사용하고 제출된 이메일이 유효하지 않은지 확인합니다.

그런 다음 json_encode를 사용하여 결과 배열을 인코딩하여 클라이언트 측 또는 자바스크립트 끝에서 JSON으로 데이터를 더 쉽게 구문 분석할 수 있습니다.

그런 다음 scripts.js 파일 내부의 save()라는 내 javascript 함수에 대해 설명합니다. 아래 코드를 확인해주세요.

function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here

                response = JSON.parse(response);

                // Check if there is has_error property on json response from the server
                if(!response.hasOwnProperty('has_error')) {
                    // Reload lists of employees
                    all();

                    // We will display the result using alert
                    Swal.fire({
                      icon: 'success',
                      title: 'Success.',
                      text: response.response
                    });

                    // Reset form
                    resetForm(form);
                } else {
                    // We will display the result using alert
                    Swal.fire({
                      icon: 'warning',
                      title: 'Error.',
                      text: response.response
                    });
                }

                $this.attr('disabled', false).html($caption);

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

ajax의 성공 함수에서 볼 수 있듯이 서버측 결과에서 오는 응답이 있습니다. JSON을 구문 분석한 다음 JSON에 has_error 속성이 없는지 확인한 다음 성공 경고를 실행하고 직원 기능 목록을 다시 로드합니다.

그런 다음 JSON 응답에 has_error 속성이 있으면 오류 메시지가 표시됩니다. 그것이 내가 당신을 돕고 그것을 당신의 프로젝트에 통합할 수 있기를 바랍니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/how-to-validate-email-address-in-php-with-jquery-ajax를 방문하십시오.

감사합니다. 즐거운 코딩하세요!