前端開發中，表單是一項非常常見的元素。通過表單，頁面可以收集用戶的輸入數據，并將這些數據提交給后端服務器進行處理。在表單提交前，我們通常需要對用戶的輸入數據進行修改或校驗，以保證數據的正確性和完整性。在這個過程中，JavaScript是一項非常重要的技術，它可以幫助我們輕松地修改表單數據。 首先，我們來看一個簡單的例子。假設我們有一個表單，其中包含一個文本輸入框和一個提交按鈕。用戶可以在文本輸入框中輸入任意內容，點擊提交按鈕后，表單數據將被提交到后端服務器進行處理。但是，在提交之前，我們需要檢查用戶輸入是否正確。例如，我們可能需要確保用戶輸入的是一個有效的電子郵件地址。 ```html

Email:

Submit

``` 現在，我們可以使用JavaScript來截取這個表單，并檢查用戶輸入的內容是否有效。具體來說，我們需要獲取表單元素的值，并對其進行校驗。如果校驗失敗，我們需要給出一個錯誤提示，并阻止表單的提交。以下是一個示例代碼： ```javascript var form = document.querySelector('form'); var emailInput = document.querySelector('#email'); form.addEventListener('submit', function(event) { if (!isValidEmail(emailInput.value)) { alert('Invalid email address'); event.preventDefault(); } }); function isValidEmail(email) { // 此處省略判斷邏輯 } ``` 在上面的示例代碼中，我們使用`document.querySelector`方法獲取了`form`元素和`email`輸入框元素。然后，我們向表單元素添加了一個`submit`事件監聽器。在事件處理函數中，我們調用了`isValidEmail`函數來判斷用戶輸入的電子郵件地址是否有效。如果不是，我們會彈出一個錯誤提示，并通過`event.preventDefault`方法阻止表單的提交。 除了校驗用戶輸入外，我們還可以使用JavaScript來動態修改表單元素的值。例如，我們可以根據用戶的選擇，在表單中顯示或隱藏某些元素。以下是一個示例代碼： ```html

Show address?

Address line 1:

Address line 2:

City:

State:

Zip:

Submit

``` 在上面的示例代碼中，我們創建了一個包含一個復選框和一組地址輸入框的表單。如果用戶選擇復選框，地址輸入框將顯示在表單中。否則，地址輸入框將保持隱藏。 接下來，我們可以編寫以下的JavaScript代碼來實現這個功能： ```javascript var showAddressCheckbox = document.querySelector('#showAddress'); var addressFields = document.querySelector('#addressFields'); showAddressCheckbox.addEventListener('change', function() { if (showAddressCheckbox.checked) { addressFields.style.display = 'block'; } else { addressFields.style.display = 'none'; } }); ``` 在上面的代碼中，我們使用了`document.querySelector`方法獲取了復選框元素和地址輸入框元素。然后，我們向復選框元素添加了一個`change`事件監聽器。在事件處理函數中，我們根據復選框的狀態，使用`style.display`屬性來控制地址輸入框的顯示或隱藏。 總之，JavaScript是一項非常強大、靈活的技術，它可以幫助我們輕松地修改表單數據。在實際開發中，我們可以根據具體需求，靈活應用JavaScript來實現各種功能。