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

Question

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

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

我如何进行；

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

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

我知道autofill="off" 属性不是一个选项。 我使用 $_SESSION[$tmp_var] 是因为非 Javascript 用户可以在出现错误时重新加载页面，并且该字段已填充此内容，因此他们不必重新输入其值。

我想保留表单的自动填写功能，因为它可以节省用户的时间。

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

$("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);
        }
    }); 
});      

我想到的第一件事就是截取email确认的字段id，并与email字段值进行比较

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

有什么建议吗？

Answer 1

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

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