Question

我使用ajax / php创建了表单验证。使用不同的文件验证每个文本框，例如username_ajax.php。一旦检查完信息，就可以在屏幕上回显（“用户名确定”）。我无法弄清楚如何允许用户只有在所有文本框都“正常”时才按下提交按钮。任何帮助将不胜感激，谢谢。

我的代码（很抱歉很久）：

<!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>

Answer 1

将提交按钮设置为禁用，直到所有输入都经过验证。

要执行此检查，在完成检查任何输入后，检查是否所有其他输入都已经过验证。您需要创建一个全局数组来保存哪些输入有效。

请注意，即使您正在进行此验证，您也应该在实际提交表单后重新进行验证，因为恶意用户仍然可以发送无效的输入数据。

Answer 2

你需要有状态标志和检查程序..

开始时禁用输入按钮：

<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;
            }
    }

顺便说一句，我会质疑你在查询字符串上发送用户名和密码..这个事实让全世界都能看到..将存储（或许永远）任意数量的路由器日志， snifferes，代理服务器..和您的Web服务器日志文件。

没有更好/更清洁/更聪明的方法吗？

Ajax表单验证

2 个答案: