Question

我有一个HTML文件，其中包含注册表单（输入，标签，按钮等）。我有一个特殊的div：

<div id ="errorArea"></div>

- 这是我想用来显示错误消息的保留空格（已经使用登录，密码不匹配，电子邮件不能为空等等）。有触发php的提交按钮。在当前状态下，一切正常，因为我使用它来显示消息：

if (!empty($myrow['id'])) {
    exit ("this login is already used");
 }

按下提交按钮后，如果出现错误，则新的白色空白显示我们预定义的文本。我想要实现的是：在errorArea div中显示错误消息，而不离开当前页面。你能帮助我，因为我无法找到自己最好的方法。请记住，我对PHP语言知之甚少。

更新也许有一种方法可以使用新参数刷新页面，或者加载另一个完全相同的页面是合法的，除了添加新文本？
Update2 任何人都可以解释我是否有可能在发布数据a.k.a触发php脚本之前触发javascript？

Answer 1

“不离开当前页面” - 非常糟糕的主意。

首先，你的表格动作是什么？它通常应该导致验证脚本，用户看不到，并且反过来可以导致成功的登录页面，或者，如您所愿，重建第一个登录页面，并显示错误消息。

这一切都很标准。只需谷歌浏览PHP登录表单验证教程（或示例）。

不要担心，PHP需要学习（但要获得一个好的IDE，比如NetBeans）。

祝你好运！

[更新]我只是针对php login example进行了搜索，并且有一些好的点击量。例如，第一个http://www.9lessons.info/2009/09/php-login-page-example.html，但为什么要从点击的第一页看一些？

重要：很多人在这里告诉你必须使用客户端代码。那是100％不的情况。

是的，客户端，我可以，也可以，代码客户端（我从简单的JS开始，转移到JQuery和现在正在编写AndularJs）。我知道为什么客户端，Ajax或其他方面都是A Good Thing，但听起来OP才刚刚开始，那么为什么不让他先掌握服务器端呢？然后，当他掌握了这一点后，他可以看一下客户端（我只是担心这里的某个人会试着和他谈谈在服务器端使用NodeJ。再次，并非完全错误，但对于初学者来说，最好是从PHP开始）

可以完全在服务器端完成。登录部分必须在服务器端完成（你要在哪里验证密码？）。

OP，某些表单输入可以在客户端验证（有效日期，邮政编码等是必填字段是空白吗？）

你可以（我甚至可以说“应该”）做那个客户端以避免往返服务器。

但是，您也可以在服务器上查看所有用户输入并将其排序。我强烈推荐这个 - 更精简。

作为一个更精简的人，我建议你：

在进入客户端之前在服务器方面变得相当熟练（但在中期都做好了）
获得一个好的IDE，例如NetBeans，并学习如何使用调试器
查看其他人的代码。 Google为您tutorial或example提供任何您想要做的事情。买一本书来学习也不会有什么坏处。

客户端 - 请求 - 让我们不要开始一场火焰战。我知道你为什么提倡你所倡导的东西，但这并非100％必要 - 在这种情况下 - 它可以全部在服务器方面完成而我只是想帮助OP学习，而不是认为它太复杂了＆安培;放弃和放弃走开。

Answer 2

您想要的是客户端验证，通常使用JavaScript实现。我建议使用jQuery库，因为它抽象了很多确保浏览器兼容性的丑陋。如果您想验证用户点击提交的时间，则下面的伪代码是起点。

$('#myForm').submit(function(e) {
    // do error checking here

    If (error) {
         // spend error message to div
         return false; // prevents standard form submission event
    }
 });

另一种选择是在用户完成输入字段时验证每个输入字段。伪码下面概述：

$(document).on('change', '.my-form-fields', function () {
    // check if valid and post message if needed
});

Answer 3

也许我的代码会帮助你）

使用jQuery的HTML：

(function($){

"use strict";

$('document').ready(function(){
    $( ".submit-button" ).on('click', function(){

    var ajaxData = {
        action: 'getsettings',
        string: $('.name').val()
    };

    $.ajax({
        type: 'POST',
        url: 'resp.php',
        data: ajaxData }).done(function(msg){
            console.log(msg);
        });
    });
});

})(jQuery);


<input type="text" class="name">
<button class="submit-button">Button</button>

使用php脚本文件resp.php：

if ( 'POST' === $_SERVER['REQUEST_METHOD'] && 
     isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && 
     'XMLHttpRequest' === $_SERVER['HTTP_X_REQUESTED_WITH'] ) {

    if (    'getsettings' === $_POST['action'] &&
        isset($_POST['action']) && 
        !empty( $_POST['action'] ) ) {

     echo $_POST['string'];
     /*.... Your code ....*/

    }

}

工作正常！

Answer 4

你需要的是Javascript，因为PHP是服务器端，你不能只使用PHP更改文本而不需要离开/刷新/重定向，这里有一个关于如何验证电子邮件地址并向div添加文本的示例

摘自http://www.w3schools.com/js/js_form_validation.asp 并修改为你的案例

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  document.getElementById('errorArea').innerHTML = "Invalid Email";
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
<div id ="errorArea"></div>
</form>
</body>

</html>

使用php显示错误消息？

4 个答案: