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>