验证 PHP 表单并更改提交按钮而不是重定向到状态页面

Posted 2023-05-09

【中文标题】验证 PHP 表单并更改提交按钮而不是重定向到状态页面

【英文标题】：Validating PHP form and change submit button instead of redirect to status page

【发布时间】：2011-08-06 01:10:00

【问题描述】：

我有一个基本的 php 表单，提交时会发送电子邮件：

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    </p>
</form>

此表单运行良好，但我目前没有验证，因此即使字段为空白也提交表单。难道不能用jquery做验证吗？

一旦提交表单，它就会发布到 codeigniter 中的控制器文件，该文件使用 codeigniter 中的电子邮件帮助程序执行电子邮件发送逻辑。见这里：

if($this->email->send())
    
        echo 'Message has been sent';
    
    else
    
        show_error($this->email->print_debugger());
    

如您所见，这会重定向到 email_form 视图并回显结果。是否可以只停留在具有表单的同一个联系页面上并在那里显示帖子的结果，而不是重定向到<?=base_url()?>contact/email_form 视图？我正在考虑将提交按钮的文本更改为“已发送消息”或类似的内容，然后清除表单字段。这样他们就可以留在联系页面上。

这一切都可以用 jquery 实现吗？谢谢！

【参考方案1】：

是的，一切皆有可能。

具体来说，你会做这样的事情：

$( '#submitbutton' ).click(function()
    $.ajax(); //do ajax

    return false; //should override default form submission
);

您会寻找$.post() 函数。不过，我喜欢尽可能多地进行控制，所以我使用了$.ajax() 函数。

它们都需要处理 URL 和数据，所以这对您非常有用。

您将在$.ajax() 的“success:”参数或$.post() 的成功回调中处理成功返回（可能带有特定的成功代码要处理）。 在该函数内部，您可以使用 CSS selectors 和 jQuery 函数（如 .html()）更改 DOM 元素的内容（如示例中的按钮）。

这里是some tutorials 开始使用 jQuery！

请记住，仅验证电子邮件是不够的。您还需要检查其他可能性！ 此外，请确保在服务器上在 POST 之后进行验证。 javascript 可以关闭，然后（如果您在浏览器上进行验证）您的所有验证将无任何作用来保护您的服务器或一般公众。

综上所述，你可以在jQuery中使用$.post()或$.ajax()将数据传递给你的服务器进行处理。

【讨论】：

谢谢！一旦我了解了.ajax() 函数，就很容易了。我在这个过程中学到了很多。谢谢！

没问题！很高兴我能帮上忙，你学到了很多！我喜欢 jQuery 做 AJAX 的方式，你说得对：它让事情变得简单！

【参考方案2】：

您应该始终进行服务器验证，因为用户可能禁用了 javascript。我将验证每个输入的允许值，以便您的应用程序是安全的，并且您不会变成垃圾邮件大炮。我会通过向表单添加一个令牌来做到这一点，以确保您的应用程序是创建表单的应用程序，因此可以继续发送电子邮件的部分。请参阅以下相关帖子：

PHP Authenticity Tokens

【讨论】：

我不认为@drpcken 在询问如何进行 JS 验证。他在问如何使用 AJAX 将表单发送到验证器并在不更改页面的情况下处理响应。

【参考方案3】：

我今天早上基本上做了同样的事情：

$('#contact_form').submit(function() 
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') 
        return false;
    
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val(),
      function(data) 
          // this checks the return value from the submit
          if (data == 'Message has been sent') 
               // do something
               $('#contact p.alt').html('Message Sent');
           else 
               // the send email function returned something other than success
               alert('failed');
          
      
    return false;

【讨论】：

啊，看起来不错。它需要在 jQuery('document').ready() 函数中（这里是 jQuery noob）还是我可以确保它在页面上的脚本中？同样使用这个脚本，我可以从表单属性中取出action="<?=base_url()?>contact/email_form" 对吗？谢谢！

我认为建议将所有 jQuery 放在一个 jQuery('document').ready() 函数中。你可以把它从表单标签属性中去掉，但我想留下它以防万一有人不支持javascript。