百度前端技术学园

# DOM 表单事件

# 课程目标

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

# 如何提交表单

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

# 阻止表单提交默认事件

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

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

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

# 表单聚焦/失焦事件

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

# 输入事件

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

# 表单属性和方法

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

# 表单验证

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

# 任务

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

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

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

任务需求

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

注意事项

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

# 进阶任务

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

# 提交

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

# 总结

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

← 键盘事件 →