WEB前端教程：DOM 表单事件

学习掌握如何提交表单，并且阻止表单提交默认事件

课程目标

学习掌握如何提交表单，并且阻止表单提交默认事件
学习掌握用户输入表单数据触发细一些常用事件：焦点事件，输入事件等
学习正确获取表单数据值以及定位表单元素
学会验证表单值是否合法

如何提交表单

阅读下面文档，学习如何提交一个表单

表单：事件和方法提交(opens new window)

阻止表单提交默认事件

当您提交表单时，浏览器将获取您用户编写的所有值并将它们发送到您网站的后端。但是，这会导致整个页面重新加载。这是因为浏览器默认会将数据发送到相同的 URL，除非您指定表单的 action 属性。

默认情况下，浏览器会将数据发送到当前页面。为避免这种情况，您需要使用 event.preventDefault().

form.addEventListener("submit", (event) => {
  event.preventDefault();
  // the form will not reload anymore
});

Event.preventDefault() | MDN(opens new window)

表单聚焦/失焦事件

focus 和 blur 事件往往是在表单验证使用。它们让您知道用户何时将焦点放在文本框上（将光标放在其中）以及何时移除焦点 ( blur)。

输入事件

阅读下面文档，学习用户输入修改表单数据时，经常会触发的事件

表单属性和方法

用户输入完成后，我们要怎么获取表单的值呢？请阅读下面文档进行学习

表单属性和方法 | javascript 现代教程(opens new window)

表单验证

我们成功获取用户输入表单的值，就可以将数据提交给服务器了。但是万一用户输入错误的值或者没有输入，可能造成错误，我们还需要进行表单验证在 html 学习阶段我们已经学习了如何利用内置 API 验证表单输入。现在我们具体学习如何利用 javascript 进行表单验证

任务

如示例图 (opens new window)中所示，实现一个注册页面，要求填入名称，密码，密码确认，邮箱以及手机。

对输入框中内容进行格式校验，并在其下方显示校验结果校验规则：

名称字符数为 4~16 位,必填
密码首字母必须大写，并且密码长度不能小于 8，必填
密码确认必须和密码一致，必填
邮箱和手机号输入必须符合其格式，选填，

任务需求

表单获得焦点时，下方显示表单填写规则
表单失去焦点时校验表单内容
校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字
校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字
点击提交按钮时，需要表单提交的默认行为，并且对页面中所有输入进行校验，校验结果显示方式同上。
所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”

注意事项

要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
实现中，尽可能考虑代码的可读性和可复用性
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

进阶任务

如果你很快就完成上面的任务，可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-26 10:42
阅读 ( 410 )
分类：WEB前端开发