使用javascript的验证表单，在失败时激活错误类

在使用JavaScript进行表单验证时，如果验证失败，通常会激活一个错误类来提示用户。以下是这个过程的基础概念和相关实现细节：

基础概念

表单验证：确保用户在提交表单之前输入的数据符合特定的标准或规则。
错误类：一种CSS类，用于在验证失败时改变表单元素的样式，以提醒用户修正输入。

类型

HTML5表单验证：利用浏览器内置的验证属性，如required、pattern等。
JavaScript表单验证：通过编写自定义脚本来实现更复杂的验证逻辑。

应用场景

注册页面：验证用户名、邮箱格式、密码强度等。
搜索功能：确保搜索查询不为空。
订单提交：验证地址、电话号码等信息。

示例代码

以下是一个简单的JavaScript表单验证示例，当验证失败时激活错误类：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<style>
  .error {
    border: 1px solid red;
  }
  .error-message {
    color: red;
    display: none;
  }
</style>
</head>
<body>

<form id="myForm">
  <input type="text" id="username" name="username" required>
  <span class="error-message" id="usernameError">Username is required.</span><br>
  
  <input type="email" id="email" name="email" required>
  <span class="error-message" id="emailError">Valid email is required.</span><br>
  
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  let isValid = true;
  
  // Clear previous error messages and styles
  document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
  document.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
  
  // Validate username
  const username = document.getElementById('username');
  if (!username.value) {
    username.classList.add('error');
    document.getElementById('usernameError').style.display = 'inline';
    isValid = false;
  }
  
  // Validate email
  const email = document.getElementById('email');
  if (!email.validity.valid) {
    email.classList.add('error');
    document.getElementById('emailError').style.display = 'inline';
    isValid = false;
  }
  
  if (!isValid) {
    event.preventDefault(); // Prevent form submission
  }
});
</script>

</body>
</html>