Question

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

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

此致

Answer 1

您必须使用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 2

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

Answer 3

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

为页面提供提供反馈所需的所有信息，可能是在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代码获取数据的位置或执行数据计算的位置。

PHP - 即时反馈表格？

3 个答案: