JavaScript はフォームのバックフィルを実装します

フォームのバックフィルとは、フォームを送信するときに、フォーム内のフィールドが検証に失敗して返された場合、ユーザーはフォーム全体を埋める必要はなく、検証に失敗したフィールドを変更して再送信するだけで済むことを意味します。これにより、ユーザーの時間が節約され、ユーザー エクスペリエンスが向上します。

フロントエンド開発では、JavaScript を使用してフォームのバックフィルを実装するのが一般的な方法です。以下に 2 つの一般的な実装方法を紹介します。

最初の方法は、フォーム データをブラウザのローカル キャッシュに保存することです。フォームの送信が失敗した場合、ページの再読み込み時にキャッシュ内のデータが読み取られて、フォームの各フィールドが自動的に入力されます。この方法の利点は、ユーザーがデータを補充する必要がなく、作業の重複を避け、ユーザーの満足度を向上できることです。

コードは次のとおりです:

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

2 番目の方法は、フォームを送信する前に 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);

上記は、フォームのバックフィルを実装する 2 つの一般的な方法です。フォームの埋め戻しを実装する適切な方法は、特定の状況に基づいて選択する必要があります。

以上がJavaScript はフォームのバックフィルを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。