使用JustValidate、PHPMailer时如何实现表单数据同步写入数据库

第一步：提前创建数据库表 #

先在你的artemdaniluk库中创建存储报名数据的表，执行以下SQL：

CREATE TABLE `applications` (
  `id` int UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `name` varchar(100) NOT NULL COMMENT '姓名',
  `email` varchar(100) NOT NULL COMMENT '邮箱',
  `phone` varchar(20) NOT NULL COMMENT '手机号',
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '提交时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

第二步：调整PHP业务代码 #

主要优化数据库连接后的插入逻辑，新增参数校验、SQL注入防护，同时调整响应格式方便JS判断状态：

<?php 
// 开启JSON响应格式
header('Content-Type: application/json');
$res = ['code' => 0, 'msg' => '操作成功'];

$connect = mysqli_connect('localhost', 'root', 'root', 'artemdaniluk');
if(!$connect) {
    $res['code'] = 1;
    $res['msg'] = '数据库连接失败：' . mysqli_connect_error();
    echo json_encode($res);
    exit;
}

// 接收并校验参数
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$phone = trim($_POST['phone'] ?? '');
if(empty($name) || empty($email) || empty($phone)) {
    $res['code'] = 2;
    $res['msg'] = '参数不完整';
    echo json_encode($res);
    exit;
}

// 预处理写入数据库，防止SQL注入
$insert_sql = "INSERT INTO applications (name, email, phone) VALUES (?, ?, ?)";
$stmt = mysqli_prepare($connect, $insert_sql);
mysqli_stmt_bind_param($stmt, 'sss', $name, $email, $phone);
$insert_result = mysqli_stmt_execute($stmt);
if(!$insert_result) {
    $res['code'] = 3;
    $res['msg'] = '数据写入失败：' . mysqli_error($connect);
    echo json_encode($res);
    exit;
}
mysqli_stmt_close($stmt);
mysqli_close($connect);

// 原有发邮件逻辑
require_once('phpmailer/PHPMailerAutoload.php');
$mail = new PHPMailer;
$mail->CharSet = 'utf-8';

$mail->isSMTP();
$mail->Host = 'smtp.mail.ru';
$mail->SMTPAuth = true;
$mail->Username = 'artemdaniluk.pme@mail.ru'; 
$mail->Password = 'lrPMMJupiVsDWLdJ8ksj'; 
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->SMTPKeepAlive = true;

// 给用户发邮件
$mail->setFrom('artemdaniluk.pme@mail.ru'); 
$mail->addAddress($email);
$mail->Subject = 'Заявка на участие в интенсиве Wildberries';
$body = 'large html code here';
$mail->msgHTML($body);
if (!$mail->send()) {
    $res['code'] = 4;
    $res['msg'] = '发送用户邮件失败：' . $mail->ErrorInfo;
    echo json_encode($res);
    exit;
}

// 给管理员发邮件
$mail->clearAddresses();
$mail->addAddress("sparkereddd@gmail.com");
$bodyAdmin = "Пользователь: " . $name . " оставил заявку. Его почта: " . $email . ". Номер телефона: " . $phone;
$mail->msgHTML($bodyAdmin);
if (!$mail->send()) {
    $res['code'] = 5;
    $res['msg'] = '发送管理员邮件失败：' . $mail->ErrorInfo;
    echo json_encode($res);
    exit;
}

echo json_encode($res);
?>

第三步：调整JS提交逻辑 #

修复原有提交后立即重置表单、关闭弹窗的问题，改为等接口返回成功后再操作：

const validateForms = function (selector, rules, successModal) {
  new window.JustValidate(selector, {
    rules: rules,
    submitHandler: function (form) {
      const formData = new FormData(form);
      const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          let resp = {}
          try {
            resp = JSON.parse(xhr.responseText)
          } catch (e) {}
          if (xhr.status === 200 && resp.code === 0) {
            window.open('https://www.artemdaniluk.ru/thank-you.html');
            form.reset();
            closePopup();
            openThanksModal();
          } else {
            thanksText.innerText = resp.msg || `Что-то пошло не так!`;
            openThanksModal();
          }
        }
      }

      xhr.open('POST', 'mail.php', true);
      xhr.send(formData);
    }
  });
}

validateForms('.popup__form', {
  email: {
    required: true,
    email: true
  },
  name: {
    required: true
  },
  tel: {
    required: true
  }
}, '.thanks-popup');

注意事项 #

• 生产环境请勿将数据库密码、SMTP授权码直接硬编码在业务代码中，建议单独存到配置文件中并做好权限限制
• 可根据业务需求增加手机号、邮箱格式的二次后端校验，避免前端校验被绕过
• 如果需要存储更多表单字段，只需同步在数据库表新增字段，PHP插入逻辑中新增对应参数即可

内容的提问来源于stack exchange，提问作者Akaev Dzhalal