javascript實作表單回填

表單回填是指在提交表單時，如果表單中的某個欄位未通過驗證而被退回，使用者不需要重新填寫整個表單，而是只需要修改未通過驗證的欄位並重新提交。這可以節省使用者的時間，提高使用者體驗。

在前端開發中，常用的方式是透過JavaScript實作表單回填。以下將介紹兩種常用的實作方式。

第一種方式是透過儲存表單資料到瀏覽器本機快取。當表單提交失敗後，在頁面重新載入時，透過讀取快取中的資料將表單中的各個欄位自動填入。這種方式的好處是用戶無需重新填寫數據，避免了重複勞動，並且可以提高用戶滿意度。

程式碼如下：

// 存储表单数据到本地缓存
function saveFormData() {
  var data = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value
  };
  localStorage.setItem('formData', JSON.stringify(data));
}

// 读取本地缓存中的表单数据并回填到表单中
function fillFormData() {
  var data = JSON.parse(localStorage.getItem('formData'));
  if (data) {
    document.getElementById('name').value = data.name;
    document.getElementById('email').value = data.email;
    document.getElementById('phone').value = data.phone;
  }
}

// 在表单提交前保存表单数据到本地缓存中
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  saveFormData();
  // 提交表单
});

// 在页面加载时读取本地缓存中的数据并回填到表单中
window.addEventListener('load', fillFormData);

第二種方式是透過表單提交前將表單資料儲存到URL查詢參數中，在表單提交失敗後，在頁面重新載入時，透過讀取url中的查詢參數會將表單中的各個欄位自動填入。這種方式的好處是可以在頁面重新載入時保留某個特定的狀態。

程式碼如下：

// 存储表单数据到URL查询参数中
function saveFormData() {
  var data = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    phone: document.getElementById('phone').value
  };
  var params = new URLSearchParams(window.location.search);
  params.set('formData', JSON.stringify(data));
  history.replaceState(null, '', window.location.pathname + '?' + params);
}

// 读取URL查询参数中的表单数据并回填到表单中
function fillFormData() {
  var params = new URLSearchParams(window.location.search);
  var data = JSON.parse(params.get('formData'));
  if (data) {
    document.getElementById('name').value = data.name;
    document.getElementById('email').value = data.email;
    document.getElementById('phone').value = data.phone;
  }
}

// 在表单提交前保存表单数据到URL查询参数中
document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  saveFormData();
  // 提交表单
});

// 在页面加载时读取URL查询参数中的数据并回填到表单中
window.addEventListener('load', fillFormData);

以上是兩種實作表單回填的常用方式。應根據具體情況選擇合適的方式來實現表單回填。

以上是javascript實作表單回填的詳細內容。更多資訊請關注PHP中文網其他相關文章！