JavaScript implémente le remplissage de formulaires

Le remplissage du formulaire signifie que lors de la soumission d'un formulaire, si un champ du formulaire échoue à la validation et est renvoyé, l'utilisateur n'a pas besoin de remplir l'intégralité du formulaire, mais doit seulement modifier le champ qui a échoué à la validation et le soumettre à nouveau. Cela fait gagner du temps aux utilisateurs et améliore l’expérience utilisateur.

Dans le développement front-end, une méthode courante consiste à implémenter le remplissage de formulaire via JavaScript. Deux méthodes de mise en œuvre courantes seront présentées ci-dessous.

La première méthode consiste à stocker les données du formulaire dans le cache local du navigateur. Lorsque la soumission du formulaire échoue, chaque champ du formulaire est automatiquement rempli en lisant les données du cache lors du rechargement de la page. L'avantage de cette méthode est que les utilisateurs n'ont pas besoin de recharger les données, évitent la duplication du travail et peuvent améliorer la satisfaction des utilisateurs.

Le code est le suivant :

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

La deuxième façon consiste à stocker les données du formulaire dans les paramètres de requête URL avant que le formulaire ne soit soumis. Après l'échec de la soumission du formulaire, lorsque. la page est rechargée, remplissez automatiquement chaque champ du formulaire en lisant les paramètres de requête dans l'url. L'avantage de cette approche est qu'un état spécifique peut être conservé lorsque la page est rechargée.

Le code est le suivant :

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

Voici deux manières courantes d'implémenter le remplissage de formulaire. La méthode appropriée pour mettre en œuvre le remplissage des formulaires doit être sélectionnée en fonction de la situation spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!