novalidate禁用表单客户端验证，formtarget控制提交响应显示位置。novalidate用于自定义验证、草稿保存或多步骤表单，可配合JavaScript实现灵活校验；formtarget支持\_blank、\_self等值，决定响应在新标签页、当前页或iframe中打开。两者均不替代服务器端验证，且formtarget为传统提交，与AJAX异步交互不同，适用于简单页面跳转场景。
HTML5表单属性中的
novalidate和
formtarget允许我们更灵活地控制表单验证和提交行为。
novalidate禁用客户端验证，
formtarget指定表单提交后在哪儿显示响应。
novalidate和formtarget使用方法：
novalidate 属性
novalidate是一个布尔属性，用于禁用表单或特定表单元素的客户端验证。当你想绕过浏览器的默认验证规则，或者使用自定义的 JavaScript 验证时，这个属性非常有用。
立即学习“前端免费学习笔记（深入）”；
-
用法:
-
禁用整个表单的验证:
<form action="/submit" method="post" novalidate> <!-- 表单内容 --> </form>
-
禁用特定提交按钮的验证:
<input type="submit" value="提交" formnovalidate>
-
-
场景:
- 自定义验证: 你可能希望使用 JavaScript 来执行更复杂的验证逻辑，而不是依赖浏览器的内置验证。
- 草稿保存: 允许用户在表单未完成的情况下保存草稿，而无需满足所有验证规则。
- 多步骤表单: 在多步骤表单中，你可能只想在最后一步进行完整验证。
formtarget 属性
formtarget属性允许你指定表单提交后，响应应该在哪里显示。这对于创建在新的标签页或 iframe 中显示结果的表单非常有用。
-
用法:
<input type="submit" value="提交" formtarget="_blank">
-
属性值:
_blank
: 在新的标签页或窗口中打开链接。_self
: 在当前窗口或标签页中打开链接 (默认)。_parent
: 在父框架集中打开链接。_top
: 在整个窗口中打开链接。framename
: 在指定的 iframe 中打开链接。
-
场景:
- 在新标签页中显示结果: 例如，搜索表单可以在新的标签页中显示搜索结果，而不会中断用户当前浏览的页面。
- 在 iframe 中显示结果: 你可以将表单的响应显示在页面中的 iframe 中，以实现更灵活的布局和交互。
什么时候应该使用 novalidate
？
是否应该完全禁用客户端验证？这实际上取决于你的具体需求。如果你正在构建一个非常复杂的表单，并且需要大量的自定义验证，那么禁用
novalidate并完全依赖 JavaScript 验证可能是有意义的。但是，对于简单的表单，利用浏览器的内置验证可以节省大量时间和精力。 此外，需要注意的是，禁用客户端验证并不意味着你可以跳过服务器端验证！服务器端验证对于确保数据的完整性和安全性至关重要。
formtarget
属性与 AJAX 请求有什么区别？
formtarget主要用于控制表单提交后，响应在哪里显示。它仍然是一个传统的表单提交，会刷新或导航到新的页面或 iframe。而 AJAX 请求则允许你在不刷新页面的情况下，异步地向服务器发送数据并接收响应。
选择哪种方法取决于你的需求。如果你只需要简单地在新标签页中显示结果，
formtarget可能更简单。如果你需要更复杂的交互，例如在页面上动态更新数据，或者需要在后台执行一些操作，那么 AJAX 请求可能更适合。
novalidate
和自定义验证如何协同工作？
即使你使用了
novalidate来禁用浏览器的默认验证，你仍然可以使用 JavaScript 来执行自定义验证。事实上，这通常是使用
novalidate的主要原因。
例如，你可以使用 JavaScript 监听表单的
submit事件，并在提交之前执行你的验证逻辑。如果验证失败，你可以阻止表单提交，并向用户显示错误消息。
<form action="/submit" method="post" novalidate id="myForm">
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
const email = document.getElementById('email').value;
if (!isValidEmail(email)) {
event.preventDefault(); // 阻止表单提交
alert('邮箱格式不正确');
}
});
function isValidEmail(email) {
// 简单的邮箱验证
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}
</script>在这个例子中，我们首先禁用浏览器的默认验证，然后使用 JavaScript 监听表单的
submit事件。在事件处理程序中，我们执行自定义的邮箱验证，如果验证失败，则阻止表单提交并显示错误消息。
