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

Question

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

如果在用户数据库中找不到电子邮件，则会显示创建帐户表单。输入的电子邮件随后会自动保存到自动回复器（邮件黑猩猩）中，无论用户在那一刻是否继续创建他们的帐户。

我怎样才能使用 JS/jQuery 来做到这一点？

作为起点，我想我可以做这样的事情：

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

但是，每次按键都会触发该事件，这会在输入整个电子邮件地址之前给出误报。我如何编写该代码，以便它仅在检测到“.com”（加上我添加的任何其他 TLD 名称）后触发

Answer 1

您要找的是 XHR 或 AJAX。

XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script.1 Development versions of all major browsers support URI schemes beyond http and https, in particular, blob URLs are supported

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>

如果电子邮件存在，则让您的服务器端脚本以 "exists" 响应。

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());                                     
?>

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

Is it possible to save form data without user submitting form?

javascript

forms

email

validation

jquery