使用JQuery，Ajax，PHP，Json进行表单验证

Question

我正在尝试验证用户在字段中键入的值。

我遇到了有关电子邮件字段和电子邮件确认字段的问题。

我如何进行;

用户键入其电子邮件地址， OnFocus和OnChange事件将被触发。 但浏览器倾向于自动填充电子邮件确认字段，从而触发OnChange事件。

那么所发生的是，在第一个字段中输入的电子邮件被发送到服务器以验证它并检查它是否已经在数据库中。 如果此电子邮件通过了所有测试，我将其存储在临时$_SESSION[$tmp_var] 。 但是，由于自动填充，电子邮件确认字段会在同一时间触发，有时会到服务器与$_SESSION[$tmp_var]进行比较，因为进程有点长，所以$_SESSION[$tmp_var]并不总是设置。

我知道属性autofill="off"不是一个选项。 我使用$_SESSION[$tmp_var]因为如果出现错误并且字段被填充，非Javascript用户可以重新加载页面，这样他们就不必重新键入它们的值。

我想保留表单的自动填充，因为它节省了用户的时间。

这是我的JQuery将json数组发送到PHP;

$("body").on("focusout change", "input, select", function () {
    var id = ($(this).attr("id"));
    var container = ['#' + id + "_ck", '#' + id + '_err'];
    var data_type = ($(this).attr("data-type"));
    var text = document.getElementById(id).value;
    $.ajax({
        url: 'ajax-php.php',
        type: 'post',
        dataType: 'json',
        data: { 'action': 'input_ck', 'id': id, 'text': text, 'data_type': data_type },
        success: function (data, status) {
                if (data[2] == 'true') {
                     $(container[1]).addClass("err_f");
                     $(container[1]).html(data[1]);
                     $(container[0]).html(data[0]);
                      }
                if (data[2] == 'false') { 
                     $(container[1]).addClass("pass_f"); 
                     $(container[1]).html('Valeur acceptée.');
                     $(container[0]).html(data[0]);
                }
        },
        error: function (xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    }); 
});      

我想到的第一件事就是拦截电子邮件确认的字段ID，并将其与电子邮件字段值进行比较

或者以某种方式等待一个查询在执行另一个查询之前以成功结束，这样电子邮件和电子邮件确认字段就不会同时发送;

有什么建议么？

Answer 1

如果您想坚持使用现有代码，一些小的更改将解决您的问题。 添加一个带有空字段值的附加输入字段，并在ajax请求的success函数中填充一些会话变量输出。

检查success函数中输入字段的值，直到得到一个值，然后使用setTimeout循环它，这样你就可以让ajax请求等到php脚本上的处理完成。