WEB前端教程：DOM 表单事件
学习掌握如何提交表单，并且阻止表单提交默认事件
课程目标
- 学习掌握如何提交表单，并且阻止表单提交默认事件
- 学习掌握用户输入表单数据触发细一些常用事件：焦点事件，输入事件等
- 学习正确获取表单数据值以及定位表单元素
- 学会验证表单值是否合法
如何提交表单
阅读下面文档，学习如何提交一个表单
阻止表单提交默认事件
当您提交表单时，浏览器将获取您用户编写的所有值并将它们发送到您网站的后端。但是，这会导致整个页面重新加载。这是因为浏览器默认会将数据发送到相同的 URL，除非您指定 表单的 action 属性。
默认情况下，浏览器会将数据发送到当前页面。为避免这种情况，您需要使用 event.preventDefault().
form.addEventListener("submit", (event) => { event.preventDefault(); // the form will not reload anymore });
表单聚焦/失焦事件
focus 和 blur 事件往往是在表单验证使用。它们让您知道用户何时将焦点放在文本框上（将光标放在其中）以及何时移除焦点 ( blur)。
- 聚焦：focus/blur(opens new window)
- Element: focus event | MDN(opens new window)
- Element: blur event | MDN(opens new window)
输入事件
阅读下面文档，学习用户输入修改表单数据时，经常会触发的事件
表单属性和方法
用户输入完成后，我们要怎么获取表单的值呢？请阅读下面文档进行学习
表单验证
我们成功获取用户输入表单的值，就可以将数据提交给服务器了。但是万一用户输入错误的值或者没有输入，可能造成错误，我们还需要进行表单验证 在 html 学习阶段我们已经学习了如何利用内置 API 验证表单输入。现在我们具体学习如何利用 javascript 进行表单验证
任务
如示例图 (opens new window)中所示，实现一个注册页面，要求填入名称，密码，密码确认，邮箱以及手机。
对输入框中内容进行格式校验，并在其下方显示校验结果 校验规则：
- 名称字符数为 4~16 位,必填
- 密码首字母必须大写，并且密码长度不能小于 8，必填
- 密码确认必须和密码一致，必填
- 邮箱和手机号输入必须符合其格式，选填，
任务需求
- 表单获得焦点时，下方显示表单填写规则
- 表单失去焦点时校验表单内容
- 校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
- 校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
- 点击提交按钮时，需要表单提交的默认行为，并且对页面中所有输入进行校验，校验结果显示方式同上。
- 所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”
注意事项
- 要求功能实现与任务描述中完全一致
- 示例图仅为参考，样式不需要完全实现一致
- 实现中，尽可能考虑代码的可读性和可复用性
- 请注意代码风格的整齐、优雅
- 代码中含有必要的注释
- 不允许借助任何第三方组件库实现
进阶任务
如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。
提交
把你今天觉得做得最好的代码放在 Github 后进行提交。
总结
依然把今天的学习用时，收获，问题进行记录。
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等
- 发表于 2022-10-26 10:42
- 阅读 ( 575 )
- 分类：WEB前端开发
