本文旨在解决 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免费学习笔记（深入）”；
解决方案
最佳实践是直接在
ev.target.querySelectorAll(“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 元素必须位于 required 属性依赖于浏览器支持，建议进行兼容性测试。为了更好的用户体验，可以添加自定义的验证逻辑和错误提示。
总结
通过使用 form.onsubmit 事件处理程序，可以更简洁、有效地处理表单提交和验证。这种方法不仅简化了代码，还提高了代码的可维护性和可读性。同时，需要注意 HTML 结构、浏览器兼容性和用户体验，以确保表单验证的正确性和友好性。
以上就是解决 JavaScript 表单 required 属性失效的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576953.html
微信扫一扫 
支付宝扫一扫 
