Question

我正在创建一个简单的表单，并且我希望在提交表单并成功验证后，向控制台写入输入的值。但是，当我去测试我当前的进度时，我输入一段随机文本，即使在控制台中也没有显示任何内容。这是我现在的代码（不包括任何注释掉的代码）：

＆＃13;

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script language="Javascript">
      window.onload = function() { // So the DOM can be defined
        function validateForm() {
          var form = document.forms['encrypt']['text'];
          if(form == "") {
            alert("Enter piece of text to encrypt");
            return false;
          } else {
            console.log(form.value);
          }
        }
      }
    </script>
  </head>
  <body>
    <form name="encrypt" action="#" onsubmit="return validateForm()">
      Text: <input type="text" name="text">
      <input type="submit" name="Submit and Encrypt!">
    </form>
  </body>
</html>

＆＃13;

即使我没有输入任何内容并提交表单，警报也不会弹出。还有其他与表单问题相关的帖子，但它们与我的任何关系都没有关系。我的代码有问题吗？有什么问题，我该如何解决？

编辑：我意识到window.onload仅在加载窗口时执行其中的代码。之后，所有功能都不复存在。除了删除onload处理程序之外，我还必须在正文中重新定位验证函数。

Answer 1

您的validateForm函数仅在onload函数中可见。此外，您将表单与空字符串进行比较，而不是表单中文本字段中的值。 console.log也不可见，因为页面会在您看到它之前刷新。

以下是修复了这三件事的代码。

<html>
  <head>
    <meta charset="utf-8" />
    <script>
      function validateForm() {
        var text = document.forms['encrypt']['text'].value;
        if(text == "") {
          alert("Enter piece of text to encrypt");
          return false;
        } else {
          alert("Entered '" + text + "', refreshing now.");
          return true;
        }
      }
    </script>
  </head>
  <body>
    <form name="encrypt" action="#" onsubmit="return validateForm()">
      Text: <input type="text" name="text">
      <input type="submit" name="Submit and Encrypt!">
    </form>
  </body>
</html>

Answer 2

没有理由将此函数包装在onload事件处理程序中。这样做会限制函数定义的范围，以便尝试调用它的代码实际上看不到它。（也就是说，在onload完成之后，您定义的函数不再在范围内并且不再存在。）

只需删除处理程序并直接定义函数：

<script language="Javascript">
    function validateForm() {
      var form = document.forms['encrypt']['text'];
      if(form == "") {
        alert("Enter piece of text to encrypt");
        return false;
      } else {
        console.log(form.value);
      }
    }
</script>

Answer 3

问题是当您单击提交时，您的函数validateForm（）在范围内无法访问。您可以通过在控制台中调用此函数来验证这一点。在你的代码中，它是在window.onload中定义的，所以请把它移出它。

Answer 4

尝试删除window.onload = function() {并保留validateForm功能。

为什么赢得表格价值？

4 个答案: