解决 JavaScript 表单 required 属性失效的问题

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; // 阻止表单的默认提交行为
};

代码解释：

1. document.querySelector("form").onsubmit = (ev) => { ... }: 直接将一个函数赋值给表单的 onsubmit 属性，这意味着当表单尝试提交时，这个函数将被执行。ev 参数是事件对象，包含了关于事件的信息。
2. ev.preventDefault(); (虽然这个例子里用的是 return false;，但作用是一样的): 阻止表单的默认提交行为。这是必要的，因为我们希望用 JavaScript 来处理表单数据，而不是让浏览器执行默认的提交操作。
3. Object.fromEntries([...ev.target.querySelectorAll("ul input")].map(e => [e.name, e.value])): 这部分代码负责收集表单数据。
   • ev.target 指的是触发事件的元素，也就是 元素。
   • ev.target.querySelectorAll("ul input") 选择表单中
     元素下的所有 元素。
   • [... ] 使用展开运算符将 NodeList 转换为数组，以便使用数组方法。
   • .map(e => [e.name, e.value]) 遍历每个 input 元素，并将其 name 属性和 value 属性组成一个键值对数组。
   • Object.fromEntries() 将键值对数组转换为一个对象。
4. users.push(usr = ...): 将包含表单数据的对象 usr 添加到 users 数组中。同时使用赋值表达式，将 usr 的值赋给 users.push() 的返回值，确保 usr 变量包含了新添加的用户信息。
5. msg.textContent =Thank you for joining, ${usr.fullname}!`: 更新页面上的 msg 元素，显示感谢信息，并使用模板字面量插入用户的全名。
6. return false;: 阻止表单的默认提交行为。 return false 在 onsubmit 事件处理程序中等同于调用 preventDefault()。