JS form表单提交实现全解析

一、获取表单元素

在JS中，获取表单元素可以使用querySelector方法或getElementById方法，这里我们演示使用querySelector方法获取表单元素：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
</form>

<script>
  const form = document.querySelector('#myForm');
  const username = form.querySelector('input[name="username"]');
  const password = form.querySelector('input[name="password"]');
</script>

二、表单验证

在提交表单之前，一般会进行表单验证，以确保用户输入的内容符合规范。这里我们演示一个简单的表单验证示例：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

<script>
  const form = document.querySelector('#myForm');
  const username = form.querySelector('input[name="username"]');
  const password = form.querySelector('input[name="password"]');

  form.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认提交

    if (username.value.trim() === '') {
      alert('用户名不能为空');
      return;
    }

    if (password.value.trim() === '') {
      alert('密码不能为空');
      return;
    }

    form.submit(); // 手动提交表单
  });
</script>

三、手动提交表单

在表单验证通过后，可以使用form.submit()方法手动提交表单。注意，手动提交表单时，需要阻止表单默认提交行为，否则表单会被提交两次。

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

<script>
  const form = document.querySelector('#myForm');
  const username = form.querySelector('input[name="username"]');
  const password = form.querySelector('input[name="password"]');

  form.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认提交

    if (username.value.trim() === '') {
      alert('用户名不能为空');
      return;
    }

    if (password.value.trim() === '') {
      alert('密码不能为空');
      return;
    }

    form.submit(); // 手动提交表单
  });
</script>

四、异步提交表单

在很多场景下，我们需要通过AJAX方式异步提交表单。这里我们演示一个使用fetch API进行异步提交表单的示例：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">提交</button>
</form>

<script>
  const form = document.querySelector('#myForm');
  const username = form.querySelector('input[name="username"]');
  const password = form.querySelector('input[name="password"]');

  form.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认提交

    if (username.value.trim() === '') {
      alert('用户名不能为空');
      return;
    }

    if (password.value.trim() === '') {
      alert('密码不能为空');
      return;
    }

    fetch('/api/submit', {
      method: 'POST',
      body: new FormData(form)
    })
    .then(response => response.json())
    .then(data => {
      // 处理响应数据
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>

五、文件上传

在表单中有文件上传的情况下，需要设置form的enctype属性为multipart/form-data，并将文件数据追加到FormData对象中：

<form id="myForm" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">提交</button>
</form>

<script>
  const form = document.querySelector('#myForm');
  const fileInput = form.querySelector('input[name="file"]');

  form.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认提交

    const formData = new FormData(form);
    formData.append('file', fileInput.files[0]);

    fetch('/api/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      // 处理响应数据
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>