如何在 HTML 中指定表单提交时无需验证?
<form> 元素是 HTML 中的一个重要组件，它使我们能够在网站上创建交互式部分，例如联系表单、登录表单等。通过表单元素，用户可以输入数据并提交到 Web 服务器。<form> 元素功能多样，可以包含许多不同的输入字段，例如文本框、单选按钮、复选框、下拉菜单和按钮。此外，<form> 元素包含多个属性，例如"action"和"method"，用于确定提交数据的目的地和处理方法。
表单验证是 <form> 元素中的关键部分之一，用于检查用户在表单中输入的数据，以确保其符合必要的要求。通过验证，我们可以检查提交的数据是否准确、完整且格式正确。检查表单数据的验证主要有两种方法:客户端和服务器端。
在本文中，我们将了解如何指定在 HTML 中提交表单时不进行验证。我们将讨论在 HTML 中执行此任务的三种不同方法。
指定表单未验证的不同方法
检查表单是否有效有三种不同的方法。我们将逐一详细讨论这些方法。
方法 1:使用"novalidate"表单属性
第一种方法是在表单标签中使用"novalidate"属性。此属性禁用浏览器的默认验证行为，这意味着提交表单时不会进行验证。
语法
<form action="/data-submitted" method="post" novalidate> <!-- your other input fields go here -> </form>
在上面的代码中，我们向 form 标签添加了"novalidate"属性。这会告诉浏览器在提交表单时不进行验证。请注意，此方法仅禁用浏览器的默认验证行为。如果您有自定义验证逻辑，它仍会执行。
示例
在此示例中，我们有一个 HTML 文件，其中包含一个表单，该表单在 <form> 元素上包含 novalidate 属性。此属性会告诉浏览器禁用整个表单的验证。当用户单击提交按钮时，表单将被提交，而不执行任何验证。
<html>
<head>
<title>Using novalidate attribute</title>
</head>
<body>
<form method="post" action="data-submit.php" novalidate>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required></br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button type="post">Add</button>
</form>
</body>
</html>
方法二:使用"formnovalidate"表单属性
第二种方法是在提交按钮中使用"formnovalidate"属性。此属性告知浏览器在点击按钮时不验证表单。
formnovalidate 属性会覆盖 <form> 元素的 novalidate 属性，并且此 formnovalidate 属性可与 <button> 元素中的 type="submit" 属性一起使用。
语法
<form action="/data-submitted" method="post" novalidate> <!-- 其他输入字段请在此处填写 → <button type="add" formnovalidate>Add</button> </form>
在上面的例子中，我们为提交按钮添加了"formnovalidate"属性。这会告诉浏览器在点击按钮时不验证表单。请注意，这种方法只会禁用浏览器的默认验证行为。如果您有自定义验证逻辑，它仍然会被执行。
示例
在此示例中，我们有一个 HTML 文件，其中包含一个包含两个提交按钮的表单。第一个提交按钮包含 formnovalidate 属性，该属性告诉浏览器提交表单而不执行验证。第二个提交按钮不包含此属性，将触发浏览器的默认验证行为。
<html>
<head>
<title>Using formnovalidate attribute</title>
</head>
<body>
<form method="post" action="data-submit.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br/>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br/>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br/>
<button type="post" formnovalidate>Add</button>
</form>
</body>
</html>
方法三:使用自定义 JavaScript 阻止表单验证
第三种方法是使用 JavaScript 阻止表单提交时的默认表单验证行为。这种方法可以更好地控制验证行为，并允许我们自定义验证逻辑。
语法
<form action="/data-submitted" method="post" novalidate>
<!-- your other input fields go here →
<button type="add" formnovalidate>Add</button>
</form>
<script>
const formValidate = document.getElementById(data-form');
formValidate.addEventListener(add, function(event) {
event.preventDefault();
//other data goes here
});
</script>
在上面的代码中，我们使用 JavaScript 为表单提交事件添加了一个事件监听器。此事件监听器会阻止表单提交时的默认行为。然后，您可以添加自定义验证逻辑，并以编程方式提交表单数据。
示例
在此示例中，我们的表单包含一个名为validateDataForm() 的 JavaScript 函数，该函数检索用户输入的值并检查它们是否符合要求的条件。如果任何验证测试失败，则会使用 alert() 函数显示错误消息，并且该函数返回 false，阻止表单提交。如果所有验证测试都通过，该函数将返回 true，允许表单提交。
<html>
<head>
<title>Using formnovalidate attribute</title>
</head>
<body>
<script>
function validateDataForm() {
const usernameValidate = document.getElementById("username");
const emailValidate = document.getElementById("email");
const passwordValidate = document.getElementById("password");
const emailValidateRegex = /^\S+@\S+\.\S+$/;
if (usernameValidate.value === "") {
alert("Enter a valid username");
return false;
}
if (!emailValidateRegex.test(emailValidate.value)) {
alert("Enter a valid email");
return false;
}
if (passwordValidate.value.length < 10) {
alert("Password must be at least 10 characters long.");
return false;
}
return true;
}
</script>
<form method="post" action="data-submit.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required> <br /> <label for="password">Password:</label>
<input type="password" id="password" name="password" required> <br />
<button type="post" onclick="return validateDataForm()">Add</button>
</form>
</body>
</html>
结论
在本文中，我们讨论了如何在 HTML 中指定表单提交时不进行验证，并了解了不同的方法来指定表单提交时不进行验证。我们讨论了包括"novalidate"属性、"formnovalidate"属性以及使用 JavaScript 来帮助阻止默认表单验证行为的方法。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
