使用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腳本上的處理完成。