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

本文旨在解决 JavaScript 表单中 required 属性失效的问题。通过分析问题原因和提供简洁有效的代码示例，帮助开发者正确实现表单验证，并避免常见的错误。本文将重点介绍如何利用 form.onsubmit 事件处理程序，简化表单提交和验证流程，提升代码的可维护性和可读性。

在 JavaScript 开发中，表单验证是至关重要的一环。HTML5 引入的 required 属性可以方便地实现简单的表单验证，但有时可能会遇到 required 属性失效的情况。本文将深入探讨这个问题，并提供有效的解决方案。

问题分析

原问题中，开发者在使用 required 属性时遇到了两种情况：

1. 使用 document.querySelector('button[type=submit]') 获取提交按钮时，required 属性生效，但事件监听器无法触发。控制台报错显示无法读取 null 的 addEventListener 属性，表明 submitButton 获取到的元素为 null。
2. 使用 document.querySelector('[type=submit]') 获取提交按钮时，事件监听器可以触发，但 required 属性失效，表单可以在未填写必填项的情况下提交。

这两种情况都表明选择器使用不当，或者事件处理方式存在问题。

立即学习“Java免费学习笔记（深入）”；

解决方案

最佳实践是直接在 <form> 元素上绑定 onsubmit 事件处理程序。这样可以避免选择器的问题，并简化代码。

HTML 代码：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

<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 指的是触发事件的元素，也就是 <form> 元素。
   • ev.target.querySelectorAll("ul input") 选择表单中 <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()。

注意事项：

• 确保 HTML 结构正确，input 元素必须位于 <form> 元素内。
• required 属性依赖于浏览器支持，建议进行兼容性测试。
• 为了更好的用户体验，可以添加自定义的验证逻辑和错误提示。

总结

通过使用 form.onsubmit 事件处理程序，可以更简洁、有效地处理表单提交和验证。这种方法不仅简化了代码，还提高了代码的可维护性和可读性。同时，需要注意 HTML 结构、浏览器兼容性和用户体验，以确保表单验证的正确性和友好性。

以上就是解决 JavaScript 表单 required 属性失效的问题的详细内容，更多请关注php中文网其它相关文章！