如果提交表单成功，如何显示警报以及如何验证用户输入答案

【问题标题】：How to show an alert if submitting form was successful and how to validate the user inputs如果提交表单成功，如何显示警报以及如何验证用户输入
【发布时间】：2021-05-07 05:34:59
【问题描述】：

我已经创建了一个表单和用于发送电子邮件的 PHP 代码，但是在提交表单时，如果没有页面刷新，我似乎无法实现某种无缝警报。我需要某种绿色/红色文本出现在按钮下方的某处。我还需要在电子邮件输入框中验证电子邮件的正确输入。并且还需要保护这个网站免受垃圾邮件机器人的攻击，现在我只有 HTML 和 PHP，我的 PHP：

<?php
 if(isset($_POST['button']))
{
    $to = $_POST['emailTo'];
    $from = $_POST['email'];
    $name = $_POST['fullName'];
    $comment = $_POST['comment'];

    $headers = "From: $from";
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $from . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    $mailsubject = "Online Contact Form Inquery";

    $body = "<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'></head><body>";
    $body .= "<table style='width: 100%;'>";
    $body .= "<tbody>";
    
    $body .= "<tr><td style='border:none;'><strong>Dear Gumcash Employee,</strong></td></tr>";
    $body .= "<tr><td style='border:none;'>You Received an e-mail from the online website, see details below:</td></tr>";
    $body .= "<tr><td style='border:none;'>&nbsp;</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Name:</strong> {$name}</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Email:</strong> {$from}</td></tr>";
    $body .= "<tr><td style='border:none;'><strong>Comment:</strong> {$comment}</td></tr>";
    $body .= "<tr><td style='border:none;'>&nbsp;</td></tr>";
    $body .= "<tr><td style='border:none;'>Thank you</td></tr>";
    
    $body .= "</tbody></table>";
    $body .= "</body></html>";
    
    $send = mail($to, $mailsubject, $body, $headers);
    header('Location:contact.html');
    die();
}

还有我的 HTML：


<form action="contact_process.php" method="POST" id="form">
               <div class="contact-form">
                  <div class="col-md-6 form-field input-halfrght">
                     <input name="fullName" id="fullName"type="text" class="form-input" placeholder="Full Name*" required>
                  </div>
                  <div class="col-md-6 form-field input-halflft">
                     <input name="email"  id="email" type="text" class="form-input" placeholder="Email*" required>
                  </div>
                  <div class="col-lg-12 col-md-12 form-field">
                     <select id="emailTo" name="emailTo" type="text" class="form-input" placeholder="Send To*" required>
                        <option value="e_cashdan@cashdan.com">Eric Cashdan</option>
                        <option value="r_gumersell@gumcash.com">Rich Gummersell</option>
                        <option value="g_garibaldi@gumcash.com">Gino Garibaldi</option>
                        <option value="d_macgillivray@gumcash.com">Don Macgillivray</option>
                        <option value="k_ohrnberger@gumcash.com">Kevin Ohrnberger</option>
                        <option value="d_samuylov@gumcash.com">Dmitri Samuylov</option>
                        <option value="m_caputo@gumcash.com">Mike Caputo</option>
                        <option value="f_meza">Frank Meza</option>
                        <option value="j_javett@gumcash.com">Joann Javett</option>
                        <option value="c_baum@gumcash.com">Colleen Baum</option>
                        <option value="d_payne@gumcash.com">Devin Arciprete</option>
                        <option value="m_roche">Melissa Roche</option>
                        <option value="a_collora@gumcash.com">Amy Collora</option>
                        <option value="c_aguilar@gumcash.com">Carlos Aguilar</option>
                        <option value="accounting@gumcash.com">Accounting</option>
                        <option value="quotations@gumcash.com">Quote</option>
                        <option value="orders@gumcash.com">Orders</option>
                        <option value="office@lovolta.com">Eugene TESTING</option>

                        </select>
                  </div>
                  <div class="col-lg-12 col-md-12 form-field">
                     <textarea name="comment" cols="1" rows="2" class="form-comment" placeholder="Comment*"></textarea>
                  </div>
                  <div class="col-md-12 form-field no-margin">
                  </div>
                  <div class="col-md-12 form-field no-margin">
                     
                     <input name="submit" type="submit" class="form-submit-btn" value="Submit Now">
                  </div>
               </div>
            </form>

尝试验证电子邮件输入，然后下拉选择选择我要将此表单提交给的电子邮件。特殊类型的场景。任何帮助将不胜感激验证，发送确认和阻止机器人。谢谢！

【问题讨论】：

标签： javascript php html forms validation

【解决方案1】：

" 无需刷新页面" - PHP 是一种服务器端语言：它获取并执行一次并忘记其状态；您每次都需要发送一个请求来执行必要的文件。

考虑到这一点，谢天谢地，我们有了 JavaScript。您可以在客户端使用您的发布数据创建对 URI 的 AJAX 请求，然后接收响应。

fetch('contact_process.php', {
    method: 'POST',
    body:   new URLSearchParams(new FormData(document.getElementById('form')))
})
.then(response => {
    return response.json()
})
.then(response => {
    // todo: add your alerts
});

注意：您的contact_process.php 页面应返回json_encode() 响应。同样，应该返回正确的内容类型。

header('Content-Type: application/json');

die(json_encode(array(
    'status'   => true,
    'message'  => 'Your custom message based on the outcome',
)));

然后您可以通过 JavaScript response 变量访问它们，例如：

.then(response => {
    if(response.status) {
        // show your response.message in green
        return;
    }

    // show your response.message in red

});

要实现这一点，您需要更改当前的解决方案。

删除form 标签
将按钮的input 标签更改为输入button 而不是submit
给按钮一个 ID，如id='submit-btn'
为其添加事件监听器

document.getElementById('submit-btn').addEventListener('click', e => {
    // fetch in here
});

【讨论】：

要么我做错了，要么我不知道如何一起拼图或显示我的消息.. 一切正常，当我点击提交时，我只得到一个空白的白色 html 页面，带有“{”状态":true,"message":"Your custom message based on the results"}" message 然后我会收到电子邮件。请详细说明
如果你能编辑我的代码会很有帮助，不胜感激
我为你更新了我的问题@YevgeniyYerokhin
你有 3 段代码，哪一段去哪？你能创建一个示例警报吗
我认为您的问题是您不了解手头的技术堆栈，因此强烈建议您寻求专业的开发人员来做这件事。您的 PHP 位于文件末尾，在您已经使用 die() 之前。然后，您的 JavaScript 在 <script> 标记中进入您的前端 HTML。它也远未完成，您必须按照自己的意愿实施警报，或者寻求雇用某人。