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

Ajax表单验证

回答

相关问题