Ajax表單驗證

我已創建使用AJAX/PHP的一個形式的驗證。每個文本框都使用不同的文件進行驗證，例如username_ajax.php。一旦信息被檢查確定，它就會在屏幕上回顯（「用戶名正常」）。我無法弄清楚如何讓用戶只有在所有文本框都「OK」的情況下才按下提交按鈕。任何幫助將不勝感激，謝謝。Ajax表單驗證

我的代碼（對不起它的長）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Sign-up</title> 
</head> 
<script type="text/javascript"> 

    function username(username) 
{ 
    var httpRequest; 
    make_request() 
    function stateck() 
     { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById ("user_div").innerHTML=httpxml.responseText; 
      } 
     } 

    httpxml.onreadystatechange=stateck; 
    user_url="ajax_username.php?username=" + username.value; 
    httpxml.open("GET",user_url,true); 
    httpxml.send(null); 
} 


function email(email) 
{ 
    var httpRequest; 
     make_request() 
     function stateck() 
     { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById("email_div").innerHTML=httpxml.responseText; 
      } 
     } 

    httpxml.onreadystatechange=stateck; 
    email_url="ajax_email.php?value=" + email.value; 
    httpxml.open("GET",email_url,true); 
    httpxml.send(null); 
} 

function confirm(password,conpassword) 

{ 
    var httpRequest; 
    make_request() 
    function stateck() 
    { 
      if(httpxml.readyState==4) 
      { 
      document.getElementById("conpass_div").innerHTML=httpxml.responseText; 
      } 
     } 
    httpxml.onreadystatechange=stateck; 
    conpassword_url="ajax_password.php?password=" + password.value + "&conpassword=" + conpassword.value; 
    httpxml.open("GET",conpassword_url,true); 
    httpxml.send(null); 
} 


</script> 

<body> 
<div id="user_div"></div> 
<div id="conpass_div"></div> 
<div id="email_div"></div> 
<form id="form" name="form" method="post" action=""> 
<label>Username<br /> 
     <input type="text" name="username" id="username" onBlur="check_username(username)"> 
     <br /> 
<br /> 
    </label> 

    <label>Password<br /> 
    <input type="password" name="password" id="password" onBlur="check_confirm  (password,conpassword);"> 
    </label>  

    <label><br /> 
    <br /> 
    Confirm Password<br /> 
    <input type="password" name="conpassword" id="conpassword" onBlur="check_confirm(password,conpassword);"> 
    <br /> 
    <br /> 
    </label>  

<label>Email<br /> 
<input type="text" name="email" id="email" onblur="check_email(email)" /> 
    <p> 
    <p> 
    <label> 
     <input type="submit" name="button" id="button" value="Submit" onclick="return false;" /> 
     </label> 
    </p> 
</form> 
</body> 
</html>

來源

2009-05-01 Elliott

有什麼問題嗎？ – 2009-05-01 13:34:08

我不知道如何讓用戶只有按下提交按鈕，一旦所有的文本框是'好'。是的....如何？ – Elliott 2009-05-01 13:43:38

你需要有狀態標誌和檢驗程序..

開始與你的輸入按鈕禁用：

<input type="submit" name="submit" id="button" disabled>

基本上..

var userNameOk; 
var passwordOk; 
var emailOk; 

function checkCanSubmit() { 
    if (userNameOk && passwordOk && emailOk) { 
    document.getElementById("button").disabled= false; 
    else 
    document.getElementById("button").disabled= true; 
}

那麼你將修改匿名方法爲每個檢查函數更新適當的狀態標誌並調用checkCanSubmit（）方法;

function stateck() 
    { 
      if(httpxml.readyState==4) 
      { 
       if (httpxml.response.Text == "whateverisvalid") { 
       emailOk = true; 
       } else { 
       emailOk = false; 
       } 
       checkCanSubmit(); 
       document.getElementById("email_div").innerHTML=httpxml.responseText; 
      } 
    }

BTW，我懷疑你要發送的用戶名和密碼..查詢字符串..讓全世界看到..這將被保存（也許是永遠）的任何數量的事實路由器日誌，snifferes，代理服務器..和您的Web服務器日誌文件。

是不是有更好的/清潔/更聰明做呀？

來源

2009-05-01 14:02:04 datacop

謝謝我會嘗試是的關於安全....我要加密發送的信息。這還不是一個完成的腳本。 Thamks – Elliott 2009-05-01 14:05:45

還有一件事會如何我已經按鈕默認情況下禁用？比如當頁面加載時......？ – Elliott 2009-05-01 14:37:23

我修改我的答案，顯示如何標記輸入按鈕被禁用，並修復了checkCanSubmit（）..享受:) – datacop 2009-05-01 14:58:34

設置，直到所有的輸入已經被驗證的提交按鈕爲禁用。

做此項檢查，檢查完所有輸入時，檢查是否所有其他輸入已經被驗證。您需要創建一個全局數組來保存哪些輸入有效。

需要注意的是，即使你正在做這驗證，你應該也曾經形式，因爲惡意用戶實際提交仍然可以發送無效的輸入數據重新做了驗證。

來源

2009-05-01 13:51:36

謝謝我已經嘗試過使用全局數組...例如每次驗證時都添加一個。然後，如果數組等於4，則執行if語句。但我不知道如何'啓用'提交按鈕，所以頁面不刷新顯示錯誤？ – Elliott 2009-05-01 13:55:47

回答

相關問題