javascript - HTML 提交表单仅在提交时执行一个 JavaScript 函数

Question

下午好，

我目前正在使用 HTML、PHP 和 JavaScript 创建网站，在尝试检查数据库中的重复用户名时遇到了问题。目前，我有一个表单，它使用以下代码在提交时调用两个 javascript 函数。

<form onsubmit="return (checkValid() && usernameCheck())" action="create.php" method="post" id="registerForm">

然后 javascript 代码出现在 body 标记的底部，在 script 标记内，如下所示。

<script>

            var pass = document.getElementById('passVal').value;
            var confPass = document.getElementById('confPassVal').value;
            var error = document.getElementById('errorMsg');
            var result = true;

        function checkValid(){ 

            if(pass !== confPass)
            {
                error.type = "text";
                error.value = "Passwords do not match!";
                error.style.backgroundColor = "#E34234";
                document.getElementById('passVal').style.borderColor = "#E34234";
                document.getElementById('confPassVal').style.borderColor = "#E34234";
                result = false;
            }

            return result;

        }

            function usernameCheck()
            {

              var username = document.getElementById('userName').value;
              var j = checkName(username);
              console.log(j);

              if ( j == "taken" ) {
                error.type = "text";
                error.value = "Username Already Exists, Please choose an alternative.";
                error.style.backgroundColor = "#E34234";
                document.getElementById('userName').style.borderColor = "#E34234";
                console.log(j);
                result = false;
              }
              if ( j == "available" ) {
                console.log(j);
                result = true;
              }

                return result;
            }

        function checkName(uname) {

              if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
              } else {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              var httpURL = "checkUserName.php?n=" + uname;
              xhttp.open("GET",httpURL,false);
              xhttp.send();
              return xhttp.responseText;
            }

    </script>

我遇到的问题是第二个 JavaScript 函数没有执行，即使它在 onsubmit 函数中被调用。因此，第三个函数也没有执行，因为这个函数是在第二个函数中调用的。第二个函数将带有用户名的 GET 值以 HTML 形式提交给 PHP 脚本。然后 PHP 脚本检查数据库以查看该用户是否存在，并根据是否存在返回一个值。下面的代码显示了 PHP 脚本。

<?php
session_start();

require 'sql.php';

header('Content-type: text/plain');
$userName = $_GET['n'];

$query =  "SELECT username FROM users where username='$username'";
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
    if ($row > 0) 
    {
        exit('taken');
    } else
    {
        exit('available');
    }
}

?>

第一个 JavaScript 函数成功执行，用于检查密码字段是否匹配。如果密码字段不匹配(因此第二个函数将不会执行)，则此函数返回假值，否则返回真值。即使第一个函数返回 true，下一个函数也不会执行，表单会在不运行第二个函数的情况下提交。

如果比我更有经验的人(我只练习了几个月的网络开发)可以指出我的方法是否有任何错误，并可能帮助我解决问题，我将不胜感激。

感谢您花时间阅读本文!

Answer 1

当你说“第二个函数不运行”时——你的意思是你在 JS 中没有得到响应吗？我想这是真的，因为你永远不会在你的 MySQL 查询中找到匹配项——而且，你的“catchall”没有放在正确的位置。

这看起来像是您第一次学习从数据库中获取数据的经验，所以我不会喋喋不休地说您对 SQL 注入(inject)攻击是完全开放的，但我会说您不能将此代码用于任何有真实用户的开放系统(您需要学习如何防止这些攻击 - SO 上有大量数据)!

因此，您至少要让“第二个功能”发挥作用的第一步......

<?php
session_start();
require 'sql.php';
header('Content-type: text/plain');
// $userName = $_GET['n']; // <<<==== here you use with a capital
$username = $_GET['n']; // let's change it to be the same
$query =  "SELECT username FROM users where username='$username'"; // now, we have a chance...
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
    if ($row > 0) 
    {
        exit('taken');
    }
}
// Here is where to put your 'catchall' in case you don't get anything from the query (what you have won't ever give 'available')
exit('available');
?>