Question

我正在尝试创建一个注册/登录表单。我想要一个表单字段。当用户在字段中键入他们的电子邮件地址时，将根据用户数据库检查电子邮件地址。如果在用户数据库中找到电子邮件，则会显示密码字段，并且用户在输入密码后会登录。

如果在用户数据库中找不到电子邮件，则会显示创建帐户表单。然后，输入的电子邮件会自动保存到自动回复器（邮件黑猩猩），以便用户在此时继续创建帐户。

我怎么能用JS / jQuery做这件事？

作为一个起点，我认为我可以做这样的事情：

<input onchange="checkDatabase();" onkeyup="this.checkDatabase();" onpaste="this.checkDatabase();" oninput="this.checkDatabase();">

然而，事件会在每次按键时触发，这将导致误报，直到输入整个电子邮件地址。我怎么能写出那些代码，只有在它检测到＆＃39; .com＆＃39; （加上我添加的任何其他TLD名称）

Answer 1

您正在寻找的内容称为XHR或AJAX。

XMLHttpRequest（XHR）是一种可用于Web浏览器脚本语言（如JavaScript）的API。它用于向Web服务器发送HTTP或HTTPS请求，并将服务器响应数据加载回脚本。1所有主流浏览器的开发版本都支持http和https之外的URI方案，特别是支持blob URL

jQuery具有您可以使用的表单验证插件，并在快速Google搜索后找到。

或者，您可以尝试this示例中的内容。我将其修改为适用于所有主流浏览器：

<script type="text/javascript">
function validateEmail(semail) {
document.body.style.cursor='wait';
// Create an instance of the XML HTTP Request object

var oXMLHTTP;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  oXMLHTTP=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  oXMLHTTP=new ActiveXObject("Microsoft.XMLHTTP");
  }

// Prepare the XMLHTTP object for a HTTP POST to our validation ASP page
var sURL = "http://mysite/mypath/validateemail.asp?email=" + semail
oXMLHTTP.open( "POST", sURL, false );
// Execute the request
oXMLHTTP.send();
if (oXMLHTTP.responseText == "exists") 
alert("Sorry - the Email " + semail + " already exists.");
document.body.style.cursor='auto';
}
</script>

然后让你的服务器端脚本响应＆＃34;存在＆＃34;如果电子邮件存在。

Answer 2

使用ajax做事。

function load(id,url,type,data,json,callback) {
    var xmlhttp;

    (window.XMLHttpRequest)?xmlhttp = new XMLHttpRequest():xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange=function() {
        if(xmlhttp.readyState==4 && xmlhttp.status==200) {  
            ((id != "")?(document.getElementById(id).innerHTML = xmlhttp.responseText):(((json == true)?(callback(JSON.parse(xmlhttp.responseText))):(callback(xmlhttp.responseText)))));
        }
    }

    xmlhttp.open(type,url,true);

    if(type == "POST") {
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(data);
    } else {
        xmlhttp.send();
    }   

}

然后只需在用户输入字段

时调用它

window.onload = function() {
    document.getElementById('email-field').addEventListener('keyup',function() {
       load("","php/check_password.php","POST","email="+document.getElementById('email-field').value+"",false,function(data) {
              if (data === true) {
                 document.getElementById('password-field').style.display = "block";
                 document.getElementById('create-account-form').style.display = "none";
              } else {
                 document.getElementById('create-account-form').style.display = "block";
                 document.getElementById('password-field').style.display = "none";
              }
       });
    });
};

db_config.php：

<?php

    DEFINE("HOST","localhost");                         // Host Name
    DEFINE("USER","root");                              // Database Username
    DEFINE("PASSWORD","");                              // Database Password
    DEFINE("DATABASE","db_osgamdrp");                   // Database Name
    DEFINE("TIMEZONE","Asia/Manila");                   // Server Timezone

?>

db_connect.php：

<?php

    include_once "db_config.php";

    date_default_timezone_set(TIMEZONE);

    class Connection {
        function con() {

            $con = mysqli_connect(HOST,USER,PASSWORD,DATABASE);

            if (!$con) {
                die("Error :" . mysqli_error());
            }

            return $con;
        }
    }

?>

check_password.php

<?php

    /* Database Connection */
    include_once "db_connect.php";

    $Connection = new connection();

    $Query = mysqli_query($Connection->con(),"SELECT 
                                              Email
                                              FROM TABLE
                                              WHERE Email = '" . htmlspecialchars($_POST['email']) . "'");

    if ($Row = mysqli_fetch_array($Query)) {
        echo true;
    else {
        echo false;
    }

    mysqli_close($Connection->con());                                     
?>

是否可以在没有用户提交表单的情况下保存表单数据？

2 个答案: