Question

我正在创建一个图书馆管理系统，但无法使用javaScript验证HTML（将书本添加到图书馆）。我将上传HTML和JS文件。当我单击提交时，我将被重定向到图书馆员的仪表板。如果您可以提供代码方面的帮助，那将是一个很大的帮助。

var btnSubmit = document.getElementById("btn-submit");

btnSubmit.addEventListener("click", function(e) {
  e.preventDefault();
  validate(e);
});

function validate(e) {
  var numbers = /[^0-9]/;
  var isbn = document.getElementById("isbn").value;
  var copies = document.getElementById("copies").value;

  if (isbn.length != 13) {
    alert("Please enter a valid ISBN Number");
  } else if (isbn.match(numbers)) {
    alert("Please enter a valid ISBN Number");
  } else if (copies == "") {
    alert("Please fill in the number of copies");
  } else if (copies.match(numbers)) {
    alert("Please enter a valid number of copies");
  }
}

<!doctype html>
<html>

<head>
    <title>Add Book Copy</title>
    <link rel="stylesheet" href="../fonts/fonts.css" />
    <link rel="stylesheet" href="../style/style.css" />
    <link rel="stylesheet" href="../style/librarian.css">
    <link rel="stylesheet" href="../style/add_book.css">
</head>

<body>

    <header>
        <h2><a href="librarian.html">Librarian</a></h2>
        <form action="../admin/logout.php" method="post">
            <input type="submit" id="btn-logout" value="Logout">
        </form>
        <br style="clear: both" />
    </header>

    <form action="../admin/add_book_copy.php" method="post">

        <h2>Add Book Copy</h2>

        <input type="text" name="copyId" placeholder="Book Copy Id" />
        <input type="text" name="isbn" placeholder="ISBN" />
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />
    </form>
<script src="../js/add_book_copy.js">   </script>
</body>

</html>

Answer 1

您未将id输入到您的输入中，即isbn and copies，这就是它无法正常工作的原因。我已将id输入了输入框。即：

var btnSubmit = document.getElementById("btn-submit");

btnSubmit.addEventListener("click", function(e) {
  e.preventDefault();
  validate(e);
});

function validate(e) {
  var numbers = /[^0-9]/;
  //you are getting values by using id give input id attribute as well
  var isbn = document.getElementById("isbn").value;
  var copies = document.getElementById("copies").value;

  if (isbn.length != 13) {
    alert("Please enter a valid ISBN Number");
  } else if (isbn.match(numbers)) {
    alert("Please enter a valid ISBN Number");
  } 
  if (copies == "") {
    alert("Please fill in the number of copies");
  }  
  else if (copies.match(numbers)) {
    alert("Please enter a valid number of copies");
  }
}

<!doctype html>
<html>

<head>
    <title>Add Book Copy</title>
    <link rel="stylesheet" href="../fonts/fonts.css" />
    <link rel="stylesheet" href="../style/style.css" />
    <link rel="stylesheet" href="../style/librarian.css">
    <link rel="stylesheet" href="../style/add_book.css">
</head>

<body>

    <header>
        <h2><a href="librarian.html">Librarian</a></h2>
        <form action="../admin/logout.php" method="post">
            <input type="submit" id="btn-logout" value="Logout">
        </form>
        <br style="clear: both" />
    </header>

    <form action="../admin/add_book_copy.php" method="post">

        <h2>Add Book Copy</h2>
      <!--added id-->
        <input type="text" name="copyId" id="copies" placeholder="Book Copy Id" />
        <input type="text" name="isbn" id="isbn" placeholder="ISBN" />
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />
    </form>
<script src="../js/add_book_copy.js">   </script>
</body>

</html>

Answer 2

您只需将pattern attribute添加到input tag

<input type="text" name="copyId" placeholder="Book Copy Id" pattern="[0-9]+" />
        <input type="text" name="isbn" placeholder="ISBN"  pattern="[0-9]{13}"/>
        <input type="text" name="date" id="date" hidden />
        <input type="submit" value="submit" id="btn-submit" />

借助此功能，您将不需要javascript函数。

Answer 3

您没有将id赋予<input>：

<input type="text" name="copyId" placeholder="Book Copy Id" id="copies"/>
<input type="text" name="isbn" placeholder="ISBN" id="isbn"/>

我正在尝试验证一个简单的html表单

3 个答案: