gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:00:41 27 4
gpt4 key购买 nike

我正在创建一个图书馆管理系统,但我无法使用 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>

最佳答案

您没有为您的输入提供 id 即:isbn 和副本 这就是它不起作用的原因。我已将 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>

关于javascript - 我正在尝试验证一个简单的 html 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57882560/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com