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 중국어 웹사이트의 기타 관련 기사를 참조하세요!