如何使用 JavaScript 实现网页表单验证功能?

  const form = document.querySelector('#myForm');

  const input = document.querySelector('#username');

  const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;

  form.addEventListener('submit', function(event) {

  event.preventDefault();

  //必填字段验证

  if (input.value === '') {

  showError('用户名不能为空');

  return;

  }

  //格式匹配验证

  if (!emailPattern.test(input.value)) {

  showError('请输入有效的电子邮件地址');

  return;

  }

  //表单验证通过,提交表单

  form.submit();

  });

  function showError(message) {

  const errorDiv = document.createElement('div');

  errorDiv.textContent = message;

  form.insertBefore(errorDiv, form.firstElementChild);

  }登录后复制