Ajax 表单验证答案

【问题标题】：Ajax form validationAjax 表单验证
【发布时间】：2010-10-15 23:46:49
【问题描述】：

我已经使用 ajax/php 创建了一个表单验证。每个文本框都使用不同的文件进行验证，例如用户名_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>

【问题讨论】：

我无法弄清楚如何让用户只在所有文本框都“确定”后才按下提交按钮。是的....怎么样？

标签： html ajax

【解决方案1】：

您需要有状态标志和检查例程..

从禁用输入按钮开始：

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

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

没有更好/更清洁/更智能的方法吗？

【讨论】：

谢谢，我会试试的，是的，关于安全性....我将加密发送的信息。这还不是一个完成的脚本。坦克斯
还有一件事我如何默认禁用该按钮？比如页面加载时...？
我修改了我的答案以显示如何标记要禁用的输入按钮并修复 checkCanSubmit().. 享受 :)
谢谢，但我一直收到错误消息：消息：'httpxml.response.Text' is null or not an object
修复它应该是 responseText 而不是 response.Text :D

【解决方案2】：

在验证所有输入之前，将提交按钮设置为禁用。

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

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

【讨论】：

谢谢我已经尝试过使用全局数组...例如每次验证时添加一个。如果数组等于四，则执行 if 语句。但我不知道如何“启用”提交按钮，以便页面不会刷新显示错误？