JavaScript implementiert das Ausfüllen von Formularen

Formular-Backfilling bedeutet, dass der Benutzer beim Absenden eines Formulars, wenn ein Feld im Formular die Validierung nicht besteht und zurückgegeben wird, nicht das gesamte Formular ausfüllen muss, sondern nur das Feld ändern muss, bei dem die Validierung fehlgeschlagen ist, und es erneut übermitteln muss. Dies spart Benutzern Zeit und verbessert die Benutzererfahrung.

In der Frontend-Entwicklung besteht eine gängige Methode darin, das Formular-Backfilling über JavaScript zu implementieren. Im Folgenden werden zwei gängige Implementierungsmethoden vorgestellt.

Die erste Möglichkeit besteht darin, die Formulardaten im lokalen Cache des Browsers zu speichern. Wenn die Formularübermittlung fehlschlägt, wird jedes Feld im Formular automatisch ausgefüllt, indem die Daten im Cache gelesen werden, wenn die Seite neu geladen wird. Der Vorteil dieser Methode besteht darin, dass Benutzer keine Daten nachfüllen müssen, Doppelarbeit vermieden wird und die Benutzerzufriedenheit verbessert werden kann.

Der Code lautet wie folgt:

// 存储表单数据到本地缓存
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);

Die zweite Möglichkeit besteht darin, die Formulardaten in den URL-Abfrageparametern zu speichern, bevor das Formular gesendet wird Die Seite wird neu geladen, jedes Feld im Formular wird automatisch ausgefüllt, indem die Abfrageparameter in der URL gelesen werden. Der Vorteil dieses Ansatzes besteht darin, dass ein bestimmter Zustand beim erneuten Laden der Seite beibehalten werden kann.

Der Code lautet wie folgt:

// 存储表单数据到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);

Die oben genannten sind zwei gängige Methoden zum Implementieren des Formular-Backfillings. Die geeignete Methode zur Implementierung des Formular-Backfillings sollte je nach Situation ausgewählt werden.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Ausfüllen von Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!