HTML站点联系页无法发送邮件且无必填项报错，该如何排查？

问题排查及解决方案 #

无浏览器默认必填提示的问题 #

• 核心原因是你的JS代码中调用了e.preventDefault()，直接阻止了表单的默认提交行为，就算你的表单控件加了required属性，浏览器自带的必填校验提示也不会触发。
• 修复方案：
  1. 优先给需要必填的表单控件（邮箱、消息输入框等）加上required属性
  2. 在阻止默认提交前先调用表单的checkValidity()方法校验表单，校验不通过就触发原生提示，代码示例：

  form.onsubmit = (e)=>{
    if(!form.checkValidity()){
      form.reportValidity(); // 触发浏览器默认错误提示
      return;
    }
    e.preventDefault();
    // 原有后续逻辑
  }
  

邮件发送失败的问题 #

第一步：排查路径引用错误

你的JS中请求的PHP路径是相对路径src/php/message.php，如果当前联系页面不在站点根目录，相对路径会出现偏移，可先修改为绝对路径/src/php/message.php测试。也可以直接在浏览器地址栏输入该PHP路径，若返回404则说明路径错误，调整到正确路径即可。

第二步：排查PHP发信配置问题

• 绝大多数公网服务器默认没有配置sendmail服务，原生mail()函数无法直接使用。可单独创建测试文件验证mail()函数可用性：

  <?php var_dump(mail("你的测试邮箱地址","测试邮件","测试内容")); ?>
  

  运行后若返回bool(false)则说明mail()函数不可用，建议更换为PHPMailer库，走第三方SMTP服务（QQ邮箱、163邮箱、企业邮箱等）发信，稳定性和送达率远高于原生mail()函数。
• 你当前代码的发件人直接使用用户提交的邮箱，属于伪造发件人行为，几乎都会被邮件服务商的反垃圾策略拦截。正确做法是固定发件人为你自己域名下的官方邮箱（如no-reply@你的域名.com），同时在邮件头添加Reply-To: 用户提交的邮箱，这样收信后回复仍然可以直接回复到用户邮箱。
• 建议给你的站点域名添加SPF解析记录，允许你的服务器IP发送邮件，降低邮件被判定为垃圾邮件的概率。
• 可在PHP代码开头打印$_POST参数，提交表单后查看XHR响应的参数是否正常，确认表单的name属性和PHP中获取的字段名完全一致（区分大小写）。

内容的提问来源于stack exchange，提问作者Constantine Linardakis