使用Javascript + Ajax驗證並提交表單

當我的表單上點擊'提交'表單時，javascript函數將遍歷表單的所有字段。
對於每個字段，將調用一個函數，該函數將返回true/false以指示它是否正確填寫。
如果返回false，它會在該字段旁邊顯示一條錯誤消息。
如果所有字段都是正確的，它會提交表單。如果不是，則不提交。

這是棘手的部分。雖然大多數驗證是通過javascript完成的，但用戶名和電子郵件需要通過ajax進行驗證，以查看用戶名/電子郵件是否已被使用。

我目前使用此功能AJAX的結構類似於這樣：

function validateSomething() 
{ 
    var valid; 
    $.post("something.php", {x:y}, 
    function(data) 
    { 
    if (isSomething(data)) 
     valid=true; 
     //Here referring to the valid variable 
     //set outside this function, in the 
     // parent function 
    else 
     valid=false; 
    }); 
    return valid/ 
}

但是，目前不能正常工作。

我該怎麼做才能使它工作，即我可以停止validateSomething（）函數返回一個值，直到它被內部函數設置爲true/false？

會是這樣的工作：

function validateSomething() 
{ 
    var valid="unset"; 
    $.post("something.php", {x:y}, 
    function(data) 
    { 
    if (isSomething(data)) 
     valid=true; 
     //Here referring to the valid variable 
     //set outside this function, in the 
     // parent function 
    else 
     valid=false; 
    }); 
    //Loop without returning until valid is set to true or false 
    while (valid=='unset') 
    { 
    //Do nothing? 
    } 
    return valid/ 
}

來源

2009-02-23 Click Upvote

您可以強制AJAX呼叫等待與異步：假的。

像這樣使用jQuery：

function validateSomething() { 
    var valid; 
    $.ajax({ 
     url: "something.php", 
     data: {x: y}, 
     type: "GET", 
     async: false, // this makes the ajax-call blocking 
     dataType: 'json', 
     success: function (response) { 
      valid= response.valid; 
     } 
    }); 
    return valid; 
}

然而，使用AJAX時，大贏的是，它是異步的。此同步調用可能會在瀏覽器等待服務器時鎖定它。

來源

2009-02-23 13:35:11 Magnar

啊，不知道那個設置。 .ajax函數是否會生成GET或POST文章？ – 2009-02-23 13:37:21

您可以指定使用類型。更新答案以澄清。 – Magnar 2009-02-23 13:38:36

你可能不想。（或者更恰當地說，「去吧，但這樣做時要小心。」）

通過AJAX進行驗證非常流行和棒極了。但它並不代替驗證服務器端。而AJAx驗證不是服務器端驗證。我可以將返回false的函數返回true並提交表單，即使您已檢查以確保用戶名不在服務器上。 Javascript運行在客戶端上，不能被信任。

當您實際提交表單時，您通過AJAX調用所做的任何驗證必須在服務器上重新進行。

如果你這樣做，那麼是的，再次，AJAX驗證，髖關節，光滑和真棒。所以去做吧。提交表單使用JavaScript（例如，在AJAX回調處理函數），你會說：

if(formwasValid) 
{ 
     document.getElementById('idOfForm').submit(); 

     $('#idOfForm').submit(); //jQuery 
} 
else 
{ 
     alert('Invalid text'); 
}

來源

2009-02-23 13:35:56

我停止在客戶端上做大量的表單驗證的代碼無論如何都要在服務器端複製。

在客戶端，我只是做領域的一些基本的語法檢查通過正則表達式。當用戶開始輸入時，這些檢查會立即觸發，但他們只是在出現錯誤時（紅色邊框，不同背景顏色，字段旁邊的紅色'X'），給出了視覺注意事項。

我不阻止用戶提交甚至無效的表單：然後，具有更詳細的檢查的服務器端代碼可以工作，它可以輕鬆地重構表單以區分有效和無效字段並生成深入解釋爲什麼檢查失敗。

來源

2009-02-23 14:11:47 Christoph

使用Javascript + Ajax驗證並提交表單

回答

相關問題