novalidate属性的作用是禁用浏览器的默认html5表单验证。通过在
在这个例子里，即使邮箱输入框有type="email"和required属性，密码输入框有minlength="8"，浏览器也不会在用户提交时自动弹出那些“请填写此字段”或者“请输入有效的电子邮件地址”之类的提示。
为什么我们会需要禁用HTML5表单验证？
这个问题，我个人觉得，往往是出于对用户体验和更精细控制的考量。虽然HTML5的内置验证很方便，但它毕竟是通用的，有时候我们需要的验证逻辑会复杂得多，或者说，我们希望验证的反馈方式能更符合我们网站的风格。
立即学习“前端免费学习笔记（深入）”；
比如，你可能需要进行跨字段验证，像“确认密码”必须和“新密码”一致，或者一个字段的有效性依赖于另一个字段的选择。HTML5的内置验证就很难处理这种联动逻辑。再比如，你可能需要异步验证，比如用户注册时要检查用户名是否已被占用，这肯定需要和后端交互。浏览器自带的验证是同步的，也做不到这一点。
还有一种情况是，你已经有了一套非常完善的JavaScript客户端验证框架，或者你的应用主要是依赖服务器端验证。在这种情况下，浏览器再来插一脚，可能会显得多余，甚至会和你的自定义验证提示冲突，导致用户体验混乱。我的经验是，当你的前端框架（比如React、Vue或Angular）已经接管了表单状态和验证逻辑时，novalidate几乎成了标配，因为你肯定不希望浏览器再跳出来“捣乱”。它提供了一种“纯净”的表单提交体验，把验证的完全控制权交还给开发者。
禁用验证后，我们应该如何处理数据验证？
禁用浏览器自带的HTML5验证后，数据验证的责任就完全落在了我们开发者肩上，这其实是件好事，因为这意味着我们可以实现更强大、更灵活的验证机制。我的建议是，你通常需要两层验证：客户端验证和服务器端验证。
客户端验证，通常通过JavaScript来实现。这可以提供即时反馈，提升用户体验。当用户输入错误时，不必等到提交整个表单，甚至不需要等到服务器响应，就能立即看到错误提示。你可以使用各种前端框架自带的验证库，比如Formik、VeeValidate，或者自己编写原生的JavaScript代码。
一个简单的JavaScript客户端验证示例可能像这样：
document.querySelector('form').addEventListener('submit', function(event) {
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
let isValid = true;
// 简单邮箱格式验证
if (!emailInput.value.includes('@')) {
alert('请输入有效的邮箱地址！'); // 实际项目中会更优雅地显示错误
isValid = false;
}
// 密码长度验证
if (passwordInput.value.length < 8) {
alert('密码至少需要8个字符！');
isValid = false;
}
if (!isValid) {
event.preventDefault(); // 阻止表单提交
}
// 如果isValid为true，表单会正常提交
});当然，更重要的是服务器端验证。这是任何Web应用中不可或缺的安全防线。客户端验证是为了用户体验，但它很容易被绕过（比如通过禁用JavaScript或者直接发送HTTP请求）。因此，所有提交到服务器的数据，都必须在服务器端再次进行严格验证。这包括数据类型、长度、格式、业务逻辑（例如，用户是否存在，库存是否足够等）。服务器端验证是数据完整性和安全性的最终保障。
Novalidate属性与JavaScript验证的优先级是怎样的？
这是一个非常关键的点，也是很多初学者容易混淆的地方。novalidate属性和JavaScript验证之间，其实谈不上“优先级”这个词，因为它们根本就是针对不同层面的。
novalidate属性，它唯一的作用就是禁用浏览器内置的HTML5表单验证。这意味着，那些由required、type="email"、minlength、pattern等HTML属性触发的默认验证行为会被跳过。浏览器不会显示默认的错误提示气泡，也不会阻止表单提交，即使输入不符合要求。
而JavaScript验证，是你自己编写的、运行在浏览器端的代码。当你设置了novalidate属性后，它并不会阻止你的JavaScript代码运行。你的JavaScript脚本依然会在表单提交事件被触发时执行，你可以在其中编写任何你想要的验证逻辑。
所以，你可以这样理解：novalidate就像是把浏览器的“自动驾驶”模式关掉了，让表单的验证完全由你（通过JavaScript）来“手动驾驶”。如果你没有编写任何JavaScript验证代码，那么在novalidate生效的情况下，表单就会直接提交，而不会有任何客户端验证。反之，如果你编写了JavaScript验证，它会正常工作，并且可以根据验证结果来阻止或允许表单提交。
这给了我们极大的灵活性：我们可以选择完全依赖自定义的JavaScript验证，同时又不必担心与浏览器默认行为产生冲突。这对于构建复杂且用户体验一致的表单应用来说，是至关重要的。
