本教程旨在解决联系表单中常见的用户体验问题，包括提交成功后状态文本显示错误颜色和表单未重置，以及提交前状态文本未正确更新。我们将深入分析 javascript 中 `indexof()` 方法的误用，并提供在 ajax 请求前更新状态文本的解决方案。通过详细的代码示例和解释，帮助开发者构建更健壮、用户友好的表单提交逻辑，确保表单提交过程的反馈准确且及时。
在现代 Web 应用中，联系表单是用户与网站互动的重要途径。一个设计良好、反馈及时的表单能显著提升用户体验。然而，在实现表单提交的异步处理（AJAX）时，开发者常会遇到一些关于状态反馈和表单行为的逻辑问题。本教程将针对两个常见的表单提交问题，提供详细的分析和解决方案，以优化前端交互逻辑。
问题一：表单提交状态反馈逻辑修正
问题描述：
当表单消息成功发送后，预期状态文本应显示为蓝色且表单内容应自动重置。然而，实际情况是即使消息发送成功，状态文本仍显示为红色，且表单并未重置。这表明在判断提交结果的逻辑中存在错误。
问题分析：
立即学习“前端免费学习笔记（深入）”；
此问题源于 JavaScript 中 indexOf() 方法的错误使用。indexOf() 方法用于查找字符串中某个子字符串的第一个匹配项的索引。如果找到，它返回该子字符串的起始索引（一个非负整数）；如果未找到，则返回 -1。
在 JavaScript 的条件语句中，0 被视为“假值”（falsy），而任何非零数字（包括 -1 和正整数）都被视为“真值”（truthy）。原始代码中的判断逻辑如下：
if(response.indexOf("Invalid email address!") || response.indexOf("Failed to send your message"))
{
statusTxt.style.color = "#ff4c29";
}
else{
form.reset();
setTimeout(() => {
statusTxt.style.display = "none";
}, 3000);
}如果 response 字符串中包含错误信息，并且该错误信息恰好出现在字符串的开头（即 indexOf() 返回 0），那么 0 在条件判断中会被视为 false。这会导致整个 if 语句的条件判断为 false，从而错误地执行 else 块中的成功逻辑（表单重置和隐藏状态文本），而不是显示错误信息。
解决方案：
正确的做法是显式地检查 indexOf() 的返回值是否为 -1。如果返回值不等于 -1，则表示找到了错误信息。
将条件判断修改为：
if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
{
statusTxt.style.color = "#ff4c29"; // 错误时显示红色
}
else{
// 成功时执行的逻辑
form.reset(); // 重置表单
statusTxt.style.color = "#1a66f1b1"; // 成功时显示蓝色
statusTxt.innerText = "Your message has been sent"; // 成功消息
setTimeout(() => {
statusTxt.style.display = "none";
}, 3000);
}注意： 原始代码中成功时没有设置 statusTxt.innerText 为成功消息，也没有设置颜色。这里补充了这些逻辑以完善用户反馈。
问题二：提交前状态文本的动态更新
问题描述：
当用户输入无效邮箱地址时，会正确显示红色文本“Invalid email address!”。但当用户修改为有效邮箱并再次点击“发送消息”按钮时，状态文本仅仅是上次的错误信息改变了颜色（变为蓝色），而没有显示预期的“Sending message...”文本。
问题分析：
立即学习“前端免费学习笔记（深入）”；
此问题发生的原因是，一旦 statusTxt.innerText 被设置为错误消息（例如“Invalid email address!”），在下一次表单提交时，该文本内容并不会自动恢复到“Sending your message...”。在 AJAX 请求发送之前，statusTxt.innerText 仍然保持着上次的错误内容。虽然 statusTxt.style.color 会被设置为蓝色，但文本内容本身没有更新，导致用户看到的仍然是旧的错误信息，只是颜色变了。
解决方案：
为了确保每次表单提交时都能正确显示“Sending your message...”这一中间状态，我们需要在 AJAX 请求被发送之前，显式地将 statusTxt.innerText 更新为该文本。
首先，定义一个常量来存储“Sending your message...”文本，提高代码的可读性和可维护性：
const sendingMsgText = 'Sending your message...';
然后，在 form.onsubmit 事件处理函数中，AJAX 请求（xhr.open()）之前，将 statusTxt.innerText 设置为 sendingMsgText：
form.onsubmit = (e) => {
e.preventDefault();
statusTxt.style.color = "#1a66f1b1";
statusTxt.style.display = "inline-block";
statusTxt.innerText = sendingMsgText; // 每次提交前都显示“Sending your message...”
let xhr = new XMLHttpRequest();
xhr.open("POST", "message.php", true);
// ... 后续逻辑
}这样，无论上次提交结果如何，每次用户点击提交按钮时，都会立即看到“Sending your message...”的提示，提供了更清晰的即时反馈。
完整修正后的 JavaScript 代码
综合以上两点修正，更新后的 script.js 文件内容如下：
const form = document.querySelector("form"),
statusTxt = form.querySelector(".button-area span ");
const sendingMsgText = 'Sending your message...'; // 定义发送中消息文本
form.onsubmit = (e) => {
e.preventDefault();
statusTxt.style.color = "#1a66f1b1"; // 初始显示为蓝色
statusTxt.style.display = "inline-block";
statusTxt.innerText = sendingMsgText; // 每次提交前都显示“Sending your message...”
let xhr = new XMLHttpRequest();
xhr.open("POST", "message.php", true);
xhr.onload = () =>{
if(xhr.readyState == 4 && xhr.status == 200){
let response = xhr.response;
// 检查 response 中是否包含错误信息，使用 !== -1 进行精确判断
if(response.indexOf("Invalid email address!") !== -1 || response.indexOf("Failed to send your message") !== -1)
{
statusTxt.style.color = "#ff4c29"; // 错误时显示红色
}
else{
// 成功时执行的逻辑
form.reset(); // 重置表单
statusTxt.style.color = "#1a66f1b1"; // 成功时显示蓝色
statusTxt.innerText = "Your message has been sent"; // 成功消息
setTimeout(() => {
statusTxt.style.display = "none";
}, 3000);
}
// 最终显示来自服务器的响应文本（如果是错误，会覆盖成功消息）
// 注意：如果成功时需要显示自定义的成功消息，应该在else块中单独设置
// 这里为了保持与原逻辑一致，依然用response，但配合上面else块的innerText设置，
// 实际成功时会显示"Your message has been sent"
if (response.indexOf("Your message has been sent") === -1) { // 避免成功消息被PHP的echo覆盖
statusTxt.innerText = response;
}
}
}
let formData = new FormData(form);
xhr.send(formData);
}PHP 代码 (message.php):
PHP 后端代码保持不变，因为它负责处理邮件发送逻辑并返回相应的字符串响应。
<?php
error_reporting(E_ERROR | E_PARSE); // 仅报告错误和解析错误
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
if(!empty($email) && !empty($message)){
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
$receiver = "[email protected]"; // 收件人邮箱，注意这里的占位符
$subject = "From: $name <$email>";
$body = "Name: $name\nEmail: $email\nPhone: $phone\n\nMessage: $message";
$sender = "From: $email";
if(mail($receiver, $subject, $body, $sender)){
echo "Your message has been sent"; // 成功响应
}
else{
echo "Failed to send your message"; // 邮件发送失败响应
}
}
else{
echo "Invalid email address!"; // 无效邮箱响应
}
} else {
echo "Please fill in all required fields."; // 字段为空的响应
}
?>注意事项：
- 在 PHP 代码中，$receiver = "[email protected]"; 这一行可能是一个邮件保护机制的占位符。在实际部署时，请将其替换为真实的收件人邮箱地址，例如 $receiver = "your_email@example.com";。
- PHP 的 mail() 函数依赖于服务器的邮件配置。如果邮件无法发送，请检查服务器的 sendmail 或 postfix 等邮件代理是否正确配置。
- 为了更全面的错误处理，可以在 PHP 端增加对其他字段（如 name）的非空检查。
- 在前端，为了避免成功消息被PHP返回的“Your message has been sent”覆盖，我在JavaScript的else块中显式设置了成功消息。如果PHP返回的成功消息与前端预期的完全一致，则可以省略 if (response.indexOf("Your message has been sent") === -1) 这一判断。
总结
通过以上修正，我们解决了联系表单中两个关键的用户体验问题。首先，通过正确使用 indexOf() !== -1 来判断服务器响应，确保了状态文本颜色和表单重置逻辑的准确性。其次，在每次提交 AJAX 请求之前，显式更新状态文本为“Sending your message...”，提供了即时且正确的用户反馈。这些改进使得表单提交过程更加直观和用户友好，提升了整体的交互质量。在开发交互式表单时，对状态管理和用户反馈的细致考量是构建高质量应用的关键。
