我試圖驗證一個簡單的HTML表單

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

您只需在input tag添加pattern attribute即可

<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

你沒有給<input>提供id ：

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

我試圖驗證一個簡單的HTML表單

問題描述

3 個解決方案

解決方案1
1 已采納 2019-09-11 05:36:49

解決方案2
1 2019-09-11 05:38:21

解決方案3
1 2019-09-11 05:46:57

我試圖驗證一個簡單的HTML表單

問題描述

3 個解決方案

解決方案1 1 已采納 2019-09-11 05:36:49

解決方案2 1 2019-09-11 05:38:21

解決方案3 1 2019-09-11 05:46:57

解決方案1
1 已采納 2019-09-11 05:36:49

解決方案2
1 2019-09-11 05:38:21

解決方案3
1 2019-09-11 05:46:57