php - PHP - 即时表单反馈？

Question

我的网站上有一个基本的注册表单，我只是想知道最好的方法是自动对输入的字段提供反馈，而无需按下提交按钮。

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

问候

Answer 1

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

1. 为页面提供提供反馈所需的所有信息，可能是在 JavaScript 代码中。然后，当用户输入一个值时，代码将执行其计算并做出相应的反应。
2. 通过 AJAX 查询服务器以运行服务器端计算以提供反馈。

例如：

在第一种情况下，您可能想要检查可能值的小型静态列表。因此，您可能会在页面加载时将这些值发送到 JavaScript：

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

（我知道，select无论如何 a 在这里会更有意义，但这只是为了举例。）

然后，当输入更改时，您的 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 代码在哪里获取数据或在哪里对数据执行计算。

Answer 2

您必须使用 JavaScript 来执行此操作。您可以打开keyup或打开blur（至少那些可能效果最好）。如果您在键入时需要反馈，请使用keyup. blur或者如果用户可以先取消焦点（移动到下一个字段），则可以使用。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);
});

Answer 3

使用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
            }
        })
    });