本文旨在解决 JavaScript 表单中 required 属性失效的问题。通过分析问题原因和提供简洁有效的代码示例，帮助开发者正确实现表单验证，并避免常见的错误。本文将重点介绍如何利用 form.onsubmit 事件处理程序，简化表单提交和验证流程，提升代码的可维护性和可读性。
在 JavaScript 开发中，表单验证是至关重要的一环。HTML5 引入的 required 属性可以方便地实现简单的表单验证，但有时可能会遇到 required 属性失效的情况。本文将深入探讨这个问题，并提供有效的解决方案。
问题分析
原问题中，开发者在使用 required 属性时遇到了两种情况：
- 使用 document.querySelector('button[type=submit]') 获取提交按钮时，required 属性生效，但事件监听器无法触发。控制台报错显示无法读取 null 的 addEventListener 属性，表明 submitButton 获取到的元素为 null。
- 使用 document.querySelector('[type=submit]') 获取提交按钮时，事件监听器可以触发，但 required 属性失效，表单可以在未填写必填项的情况下提交。
这两种情况都表明选择器使用不当，或者事件处理方式存在问题。
立即学习“Java免费学习笔记（深入）”；
解决方案
最佳实践是直接在 <form> 元素上绑定 onsubmit 事件处理程序。这样可以避免选择器的问题，并简化代码。
HTML 代码：
<div class="rightside-content">
<div class="signup-title">
<h1>Sign up</h1>
</div>
<form class="join-form">
<ul>
<li><input type="text" name="username" class="username" placeholder="Username" required></li>
<li><input type="text" name="fullname" class="fullname" placeholder="Full Name" required></li>
<li><input type="email" name="email" class="email" placeholder="Email Address" pattern=".+@gmail\.com" required value="[email protected]"></li>
<li><input type="text" name="phone" class="phone" placeholder="Phone Number" required></li>
<li><input type="text" name="postcode" class="postcode" placeholder="Post Code" required></li>
<li><input type="password" name="password" class="password" placeholder="Enter a password" required></li>
</ul>
<input type="submit">
</form>
<div id="msg"></div>
</div>CSS 代码（可选）：
form li {
display: block;
}JavaScript 代码：
const users = [];
const msg = document.getElementById("msg");
document.querySelector("form").onsubmit = (ev) => {
let usr;
users.push(
(usr = Object.fromEntries(
[...ev.target.querySelectorAll("ul input")].map((e) => [e.name, e.value])
))
);
console.log(users);
msg.textContent = `Thank you for joining, ${usr.fullname}!`;
return false; // 阻止表单的默认提交行为
};代码解释：
- document.querySelector("form").onsubmit = (ev) => { ... }: 直接将一个函数赋值给表单的 onsubmit 属性，这意味着当表单尝试提交时，这个函数将被执行。ev 参数是事件对象，包含了关于事件的信息。
- ev.preventDefault(); (虽然这个例子里用的是 return false;，但作用是一样的): 阻止表单的默认提交行为。这是必要的，因为我们希望用 JavaScript 来处理表单数据，而不是让浏览器执行默认的提交操作。
-
Object.fromEntries([...ev.target.querySelectorAll("ul input")].map(e => [e.name, e.value])): 这部分代码负责收集表单数据。
- ev.target 指的是触发事件的元素，也就是 <form> 元素。
- ev.target.querySelectorAll("ul input") 选择表单中 <ul> 元素下的所有 <input> 元素。
- [... ] 使用展开运算符将 NodeList 转换为数组，以便使用数组方法。
- .map(e => [e.name, e.value]) 遍历每个 input 元素，并将其 name 属性和 value 属性组成一个键值对数组。
- Object.fromEntries() 将键值对数组转换为一个对象。
- users.push(usr = ...): 将包含表单数据的对象 usr 添加到 users 数组中。同时使用赋值表达式，将 usr 的值赋给 users.push() 的返回值，确保 usr 变量包含了新添加的用户信息。
- msg.textContent =Thank you for joining, ${usr.fullname}!`: 更新页面上的 msg 元素，显示感谢信息，并使用模板字面量插入用户的全名。
- return false;: 阻止表单的默认提交行为。 return false 在 onsubmit 事件处理程序中等同于调用 preventDefault()。
注意事项：
- 确保 HTML 结构正确，input 元素必须位于 <form> 元素内。
- required 属性依赖于浏览器支持，建议进行兼容性测试。
- 为了更好的用户体验，可以添加自定义的验证逻辑和错误提示。
总结
通过使用 form.onsubmit 事件处理程序，可以更简洁、有效地处理表单提交和验证。这种方法不仅简化了代码，还提高了代码的可维护性和可读性。同时，需要注意 HTML 结构、浏览器兼容性和用户体验，以确保表单验证的正确性和友好性。
