JavaScript DOM学习第八章 表单错误提示

下面是JavaScript DOM学习第八章 表单错误提示的完整攻略。

1. 概述

在web应用程序中，表单验证是非常必要的功能，可以避免用户输入一些无效或不合法的数据。第八章主要讲解了如何使用JavaScript DOM来实现表单错误提示的功能。

主要思路是通过JavaScript来验证表单输入的内容，并且在满足错误条件时，使用JS DOM操作来显示错误的提示信息。

2. 实现步骤

2.1 表单结构

首先，需要有一个包含表单的HTML结构，如下所示：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Submit">
</form>

2.2 验证规则

其次，需要定义验证规则，例如对于name字段，需要输入至少2个字符而不超过20个字符，且不能包含数字和特殊字符。

判断规则可以使用正则表达式或者一些JavaScript字符串处理函数来完成。

function validateName() {
  const name = document.getElementById("name").value.trim();

  const regexName = /^[a-zA-Z\s]{2,20}$/;

  if (!regexName.test(name)) {
    setErrorFor("name", "Name should be 2-20 letters with no digits or special characters");
  } else {
    setSuccessFor("name");
  }
}

上面的代码中，使用了正则表达式来验证输入的name字段是否合法，在出现错误时，调用了setErrorFor方法来提示用户出现了错误。

2.3 显示提示信息

最后，需要实现错误提示信息的显示，可以使用DOM操作来动态的创建提示信息的HTML元素，将其添加至表单中。

function setErrorFor(inputName, message) {
  const input = document.getElementById(inputName);
  const formControl = input.parentElement;
  const errorMessage = formControl.querySelector(".error-message");

  formControl.classList.add("error");
  errorMessage.innerText = message;
}

function setSuccessFor(inputName) {
  const input = document.getElementById(inputName);
  const formControl = input.parentElement;

  formControl.classList.remove("error");
}

上面的代码中，setErrorFor方法会在表单输入错误时，将表单元素的class设置为error，并且根据错误信息动态创建一个错误信息的span元素来显示错误信息。

2.4 绑定事件

绑定事件可以在表单提交前对表单进行验证：

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  validateName();
  validateEmail();
  validatePassword();
});

上面的代码中，在表单提交前，会调用validateName、validateEmail和validatePassword方法来依次验证表单的输入内容，如果有错误，则会在界面上显示错误信息。

3. 示例说明

3.1 表单重置

在用户重置表单时，需要将错误提示信息和表单元素的class恢复为初始状态。

const resetBtn = document.getElementById("resetBtn");

resetBtn.addEventListener("click", (e) => {
  const inputElements = form.querySelectorAll(".form-control input");
  inputElements.forEach((el) => el.parentElement.classList.remove("error"));
  const errorMessages = form.querySelectorAll(".form-control .error-message");
  errorMessages.forEach((el) => (el.innerText = ""));
});

上面的代码中，当用户点击重置按钮时，会将表单元素的class设置为初始状态，并将所有错误信息清空。

3.2 加载状态

当表单提交时，需要显示加载状态，避免用户重复提交或误操作。

function setLoading() {
  form.classList.add("loading");

  const submitBtn = form.querySelector('input[type="submit"]');
  submitBtn.disabled = true;
  submitBtn.value = "Loading...";
}

function removeLoading() {
  form.classList.remove("loading");

  const submitBtn = form.querySelector('input[type="submit"]');
  submitBtn.disabled = false;
  submitBtn.value = "Submit";
}

form.addEventListener("submit", (e) => {
  e.preventDefault();

  setLoading();

  // 验证表单

  removeLoading();
});

上面的代码中，在表单提交时，会先将表单元素的class设置为loading状态，同时禁用表单提交按钮，避免重复提交。在处理完表单后，再将表单元素的class恢复为初始状态，同时激活表单提交按钮，便于用户下一次提交表单。

4. 总结

以上就是JavaScript DOM学习第八章 表单错误提示的完整攻略。通过本章的学习，可以理解如何通过JavaScript DOM操作来实现表单验证、显示错误信息和加载状态等常用功能。针对不同的业务需求，可以自行扩展和修改以上代码。