如何在只使用javascript和DOM元素的情况下使用表单验证？

在只使用 JavaScript 和 DOM 元素的情况下，可以通过以下步骤使用表单验证：

获取表单元素：使用 DOM 方法（如 getElementById、querySelector）获取表单元素对象。
监听表单提交事件：使用 addEventListener 方法监听表单的提交事件。
编写表单验证函数：在表单提交事件的回调函数中，编写表单验证函数，用于验证用户输入的数据。
获取表单输入值：通过表单元素对象的属性（如 value）获取用户输入的值。
进行验证：根据需求，使用 JavaScript 条件语句（如 if、switch）对用户输入的值进行验证。
显示错误信息：如果验证不通过，可以使用 DOM 方法创建并插入错误提示信息到表单中。
阻止表单提交：如果验证不通过，使用事件对象的 preventDefault 方法阻止表单的默认提交行为。

以下是一个简单的示例代码：

// 获取表单元素
const form = document.getElementById('myForm');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  // 阻止表单提交
  event.preventDefault();

  // 表单验证函数
  function validateForm() {
    // 获取表单输入值
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;

    // 进行验证
    if (name === '') {
      showError('name', '请输入姓名');
      return false;
    }

    if (email === '') {
      showError('email', '请输入邮箱');
      return false;
    }

    if (!isValidEmail(email)) {
      showError('email', '请输入有效的邮箱地址');
      return false;
    }

    return true;
  }

  // 显示错误信息
  function showError(field, message) {
    const errorElement = document.createElement('div');
    errorElement.className = 'error';
    errorElement.innerText = message;

    const inputElement = document.getElementById(field);
    inputElement.classList.add('error');
    inputElement.parentNode.insertBefore(errorElement, inputElement.nextSibling);
  }

  // 验证邮箱地址的函数
  function isValidEmail(email) {
    // 此处省略邮箱验证的具体逻辑
    return true;
  }

  // 执行表单验证
  if (validateForm()) {
    // 表单验证通过，可以进行后续操作，如提交表单数据
    form.submit();
  }
});

在上述示例中，我们通过 JavaScript 和 DOM 元素实现了一个简单的表单验证功能。在验证过程中，我们使用了条件语句对用户输入的值进行判断，并通过 DOM 方法创建并插入错误提示信息到表单中。如果表单验证通过，可以进行后续操作，如提交表单数据。

请注意，上述示例仅为演示目的，实际的表单验证需根据具体需求进行扩展和完善。