PHP-即时表单反馈？

我在我的网站上有一个基本的注册表格，我只是想知道最好的方法是在不必按下提交按钮的情况下自动对输入的字段进行反馈

例如，当用户输入用户名时，我如何让系统在他们按下提交按钮之前告诉他们用户名是否已被使用

---

要做到这一点，您必须使用JavaScript。您可以在

keyup

或

blur

上执行此操作（至少这些操作可能效果最好）。如果您想在键入时获得反馈，请使用

keyup

<代码>模糊或者如果用户可以先取消聚焦（移动到下一个字段），则该功能将起作用。keyup事件可能如下所示：

var lastTime = 0;
input.addEventListener("keyup", function () {
    clearTimeout(lastTime);

    // throttle input -- only check after 500 seconds
    setTimeout(function () {
        ajax.get("username-check.php?name=" + this.value)
            .done(function (used) {
                if (used) {
                    this.classList.add("error");
                }
            }.bind(this));
    }.bind(this), 500);
});

---

要做到这一点，您必须使用JavaScript。您可以在

keyup

或

blur

上执行此操作（至少这些操作可能效果最好）。如果您想在键入时获得反馈，请使用

keyup

<代码>模糊或者如果用户可以先取消聚焦（移动到下一个字段），则该功能将起作用。keyup事件可能如下所示：

var lastTime = 0;
input.addEventListener("keyup", function () {
    clearTimeout(lastTime);

    // throttle input -- only check after 500 seconds
    setTimeout(function () {
        ajax.get("username-check.php?name=" + this.value)
            .done(function (used) {
                if (used) {
                    this.classList.add("error");
                }
            }.bind(this));
    }.bind(this), 500);
});

---

使用该字段的

onchange

事件使用ajax向服务器发送请求。然后检索响应并向用户显示结果

jQuery示例：

    $('#username').on('change', function() {
        //Create object to pass
        var o = new Object();
        o.UserName = $('#username').val();

        //Stringify object into JSON
        var x = JSON.stringify(o);

        $.ajax({
            url: 'phpURL',
            type: 'GET',
            dataType: 'JSON',
            data: x,
            success: function (data) {
                //Display Results (i.e Name taken / Name available)
            },
            error: function (ajaxrequest) {
                //Display a helpful error to the user or log this error for your use.
                //ajaxrequest.responseText
            }
        })
    });

---

使用该字段的

onchange

事件使用ajax向服务器发送请求。然后检索响应并向用户显示结果

jQuery示例：

    $('#username').on('change', function() {
        //Create object to pass
        var o = new Object();
        o.UserName = $('#username').val();

        //Stringify object into JSON
        var x = JSON.stringify(o);

        $.ajax({
            url: 'phpURL',
            type: 'GET',
            dataType: 'JSON',
            data: x,
            success: function (data) {
                //Display Results (i.e Name taken / Name available)
            },
            error: function (ajaxrequest) {
                //Display a helpful error to the user or log this error for your use.
                //ajaxrequest.responseText
            }
        })
    });

---

两种选择。对于任何给定的反馈，您可以：

向页面提供提供反馈所需的所有信息，可能是JavaScript代码。然后，当用户输入一个值时，代码将执行其计算并做出相应的反应

通过AJAX查询服务器以运行服务器端计算以提供反馈

例如：

在第一个场景中，您可能希望对照一个可能值的小静态列表进行检查。因此，当页面加载时，您可能会将这些值发送到JavaScript中：

var possibleValues = [ 'firstValue', 'secondValue', 'thirdValue' ];

（我知道，无论如何，

select

在这里更有意义，但这只是为了举例。）

然后，当输入发生变化时，JavaScript代码将对照已知值检查输入，并相应地响应用户

在第二个场景中，可能有许多可能的值，或者您不希望用户看到所有可能的值（例如用户名），只想告诉他们这些值是否有效。在这种情况下，您将使用用户提供的信息发出AJAX请求。可能是这样的：

$.post( "checkvalue.php", { name: $('#someInput').val() })
 .done(function(data) {
     // check the result from the server and respond to the user accordingly
 });

---

无论哪种情况，您都在编写JavaScript代码来响应用户的输入。唯一的区别是JavaScript代码从何处获取数据，或者在何处对数据执行计算。

两个选项。对于任何给定的反馈，您可以：

向页面提供提供反馈所需的所有信息，可能是JavaScript代码。然后，当用户输入一个值时，代码将执行其计算并做出相应的反应

通过AJAX查询服务器以运行服务器端计算以提供反馈

例如：

在第一个场景中，您可能希望对照一个可能值的小静态列表进行检查。因此，当页面加载时，您可能会将这些值发送到JavaScript中：

var possibleValues = [ 'firstValue', 'secondValue', 'thirdValue' ];

（我知道，无论如何，

select

在这里更有意义，但这只是为了举例。）

然后，当输入发生变化时，JavaScript代码将对照已知值检查输入，并相应地响应用户

在第二个场景中，可能有许多可能的值，或者您不希望用户看到所有可能的值（例如用户名），只想告诉他们这些值是否有效。在这种情况下，您将使用用户提供的信息发出AJAX请求。可能是这样的：

$.post( "checkvalue.php", { name: $('#someInput').val() })
 .done(function(data) {
     // check the result from the server and respond to the user accordingly
 });

---

无论哪种情况，您都在编写JavaScript代码来响应用户的输入。唯一的区别在于JavaScript代码从何处获取数据，或者在何处对数据进行计算。

您的问题太宽泛了。答案基本上是Ajax。你应该有返回用户名的路径，然后你可以对照输入检查它们。你的问题太广泛了。答案基本上是Ajax。您应该具有返回用户名的路径，然后可以根据输入检查用户名。值得注意的是，特别是如果这是一个大型系统，如果使用

keyup

，您可能需要在其上设置一些限制机制，例如仅在一定数量的字符后进行查询，只有在输入了这么多字符或一定长度后，才能暂停输入。否则，您将得到大量基本上无用的查询（如查找“a”）。谢谢，这是一个很好的观点。正如这个答案上代码上方的一段文字所述，我可能会使用户模糊，这样ajax就不会经常运行：）值得注意的是，特别是如果这是一个大型系统，如果使用

keyup

，您可能会想在其上设置一些限制机制，例如仅在一定数量的字符后进行查询，只有在输入了这么多字符或一定长度后，才能暂停输入。否则，您将得到大量基本上无用的查询（如查找“a”）。谢谢，这是一个很好的观点。正如这个答案代码上方的一段文字所述，我可能会使用户模糊，这样ajax就不会经常运行：）