JavaScript表单验证实战教程

<form id="myForm">
  &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;用户名&quot; /&gt;
  &lt;input type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot;邮箱&quot; /&gt;
  &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;密码&quot; /&gt;
  <button type="submit">提交</button>
</form>

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

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交

  if (validateForm()) {
    // 验证通过，可提交数据
    alert('提交成功！');
    form.reset(); // 清空表单
  }
});

function validateForm() {
  const username = form.username.value.trim();
  const email = form.email.value.trim();
  const password = form.password.value;

  let isValid = true;

  // 用户名不能为空
  if (username === '') {
    showError(form.username, '用户名不能为空');
    isValid = false;
  }

  // 邮箱格式正则验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    showError(form.email, '请输入有效的邮箱地址');
    isValid = false;
  }

  // 密码长度至少6位
  if (password.length < 6) {
    showError(form.password, '密码至少6位');
    isValid = false;
  }

  return isValid;
}

function showError(input, message) {
  // 移除之前的错误提示
  const formGroup = input.parentElement;
  const errorMsg = formGroup.querySelector('.error-message');
  if (errorMsg) {
    errorMsg.remove();
  }

  // 创建并插入错误提示
  const div = document.createElement('div');
  div.className = 'error-message';
  div.style.color = 'red';
  div.style.fontSize = '12px';
  div.textContent = message;
  formGroup.appendChild(div);

  // 聚焦到出错的输入框
  input.focus();
}

form.password.addEventListener('blur', function() {
  if (this.value.length > 0 && this.value.length < 6) {
    showError(this, '密码至少6位');
  }
});