HTML-调试JavaScript时遇到困难，涉及布尔值和IsInteger（）-堆栈溢出

顺晟科技

2022-10-19 12:38:06

有人能解释为什么这段代码行为不正确。我的目标是有一个表单，抑制提交，如果姓名没有输入，或如果一个无符号整数是输入的年龄。我已经记录了isInteger和超过零的比较，它们都显示为假，所以我不明白为什么会出现“警报（”请输入有效的年龄。“）；”未在OR语句中执行。

我希望我没有错过一些明显的东西，因为我已经试着调试了一个小时了。

不胜感激

顺晟科技：

尝试在浏览器中运行代码。

出现以下错误:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript Practice</title>
  <meta charset="utf-8">
  <style>
    input {
      display: block;
      margin-bottom: 1em;
    }
    
    label {
      float: left;
      width: 5em;
      padding-right: 1em;
      text-align: right;
    }
    
    #submit {
      margin-left: 7em;
    }
  </style>
  <script>
    function validateForm() {
      if (document.forms[0].userName.value == "") {
        alert("Name field cannot be empty.");
        return false;
      }
      console.log(Number.isInteger(document.forms[0].userAge.value));
      console.log(document.forms[0].userAge.value < 0;
        if (!Number.isInteger(document.forms[0].userAge.value) ||
          document.forms[0].userAge.value < 0) {
          alert("Please enter a valid age.");
          return false;
        }
        if (document.forms[0].userAge.value < 18) {
          alert("Age is less than 18. You are not an adult.");
          return false;
        } // end if
        alert("Name and Age are valid.");
        return true;
      } // end function validateForm
  </script>
</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevbasics.net/scripts/demo.php" onsubmit="return validateForm();">
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName">
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge">
    <input type="submit" value="Send information" id="submit">
  </form>
</body>

</html>

问题出现在第31行，而该行缺少:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript Practice</title>
  <meta charset="utf-8">
  <style>
    input {
      display: block;
      margin-bottom: 1em;
    }
    
    label {
      float: left;
      width: 5em;
      padding-right: 1em;
      text-align: right;
    }
    
    #submit {
      margin-left: 7em;
    }
  </style>
  <script>
    function validateForm() {
      if (document.forms[0].userName.value == "") {
        alert("Name field cannot be empty.");
        return false;
      }
      console.log(Number.isInteger(document.forms[0].userAge.value));
      console.log(document.forms[0].userAge.value < 0;
        if (!Number.isInteger(document.forms[0].userAge.value) ||
          document.forms[0].userAge.value < 0) {
          alert("Please enter a valid age.");
          return false;
        }
        if (document.forms[0].userAge.value < 18) {
          alert("Age is less than 18. You are not an adult.");
          return false;
        } // end if
        alert("Name and Age are valid.");
        return true;
      } // end function validateForm
  </script>
</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevbasics.net/scripts/demo.php" onsubmit="return validateForm();">
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName">
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge">
    <input type="submit" value="Send information" id="submit">
  </form>
</body>

</html>

经过此修复后，我可以使用任何年龄。

问题出在函数中，该函数检查参数是否为整数，并总是返回，因为参数是字符串。

这里需要的检查是，您可以查看此答案有关所有详细信息，但建议的一种方法是使用函数（参数是可选的，但指定10更安全）:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript Practice</title>
  <meta charset="utf-8">
  <style>
    input {
      display: block;
      margin-bottom: 1em;
    }
    
    label {
      float: left;
      width: 5em;
      padding-right: 1em;
      text-align: right;
    }
    
    #submit {
      margin-left: 7em;
    }
  </style>
  <script>
    function validateForm() {
      if (document.forms[0].userName.value == "") {
        alert("Name field cannot be empty.");
        return false;
      }
      console.log(Number.isInteger(document.forms[0].userAge.value));
      console.log(document.forms[0].userAge.value < 0;
        if (!Number.isInteger(document.forms[0].userAge.value) ||
          document.forms[0].userAge.value < 0) {
          alert("Please enter a valid age.");
          return false;
        }
        if (document.forms[0].userAge.value < 18) {
          alert("Age is less than 18. You are not an adult.");
          return false;
        } // end if
        alert("Name and Age are valid.");
        return true;
      } // end function validateForm
  </script>
</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevbasics.net/scripts/demo.php" onsubmit="return validateForm();">
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName">
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge">
    <input type="submit" value="Send information" id="submit">
  </form>
</body>

</html>

将字符串转换为数字，如果字符串不是有效数字，则为。

所以使用和检查条件可以重写为:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>JavaScript Practice</title>
  <meta charset="utf-8">
  <style>
    input {
      display: block;
      margin-bottom: 1em;
    }
    
    label {
      float: left;
      width: 5em;
      padding-right: 1em;
      text-align: right;
    }
    
    #submit {
      margin-left: 7em;
    }
  </style>
  <script>
    function validateForm() {
      if (document.forms[0].userName.value == "") {
        alert("Name field cannot be empty.");
        return false;
      }
      console.log(Number.isInteger(document.forms[0].userAge.value));
      console.log(document.forms[0].userAge.value < 0;
        if (!Number.isInteger(document.forms[0].userAge.value) ||
          document.forms[0].userAge.value < 0) {
          alert("Please enter a valid age.");
          return false;
        }
        if (document.forms[0].userAge.value < 18) {
          alert("Age is less than 18. You are not an adult.");
          return false;
        } // end if
        alert("Name and Age are valid.");
        return true;
      } // end function validateForm
  </script>
</head>

<body>
  <h1>JavaScript Form Handling</h1>
  <form method="post" action="http://webdevbasics.net/scripts/demo.php" onsubmit="return validateForm();">
    <label for="userName">Name:</label>
    <input type="text" name="userName" id="userName">
    <label for="userAge">Age:</label>
    <input type="text" name="userAge" id="userAge">
    <input type="submit" value="Send information" id="submit">
  </form>
</body>

</html>

您可以在下面找到完整的更新代码:

上一篇：JavaScript-如何仅使用箭头下一篇：HTML-JavaScript全局变

网站建设

Html

HTML-调试JavaScript时遇到困难，涉及布尔值和IsInteger（）-堆栈溢出