如何解决表单自动填充时出现undefined值的问题

问题原因 #

• 你的prefillcard函数未判断sessionStorage.fname是否存在就直接赋值给输入框，首次访问时该值为undefined，就会直接显示在输入框中覆盖占位符
• storeBooking函数定义在validate的校验通过分支内且未被调用，就算表单提交成功也不会把值写入sessionStorage
• 输入框绑定了行内onkeypress事件，不符合你要求的禁用行内JavaScript的规则

修复方案 #

修改后的JS代码 #

function validate() {
  var errMsg = "";
  var result = true;
  var fname = document.getElementById("fname").value;
  if (!fname.match(/^[a-zA-Z ]+$/)) {
    errMsg += "Please enter your first name correctly.\n";
    result = false;
  }
  if (errMsg) {
    alert(errMsg);
    return false; // 阻止表单提交
  }
  if (result) {
    storeBooking(fname); // 校验通过后调用存储方法
    return true;
  }
}

function storeBooking(fname) {
  sessionStorage.setItem('fname', fname);
}

function getBooking() {
  const savedName = sessionStorage.getItem('fname');
  if (savedName) {
    document.getElementById("confirm_fname").textContent = savedName;
  }
}

function prefillcard() {
  const savedName = sessionStorage.getItem('fname');
  // 只有存在存储值时才回填，否则保留占位符
  if (savedName) {
    document.getElementById("fname").value = savedName;
  }
}

function init() {
  var regForm = document.getElementById("regform");
  regForm.onsubmit = validate;
  // 替换原来的行内onkeypress事件
  document.getElementById("fname").addEventListener('keypress', function(e) {
    return (e.charCode > 64 && e.charCode < 91) || (e.charCode > 96 && e.charCode < 123) || (e.charCode==32);
  });
  prefillcard(); // 初始化时执行回填
  getBooking();
}

window.addEventListener("DOMContentLoaded", init);

修改后的HTML代码 #

<form action="apply.html" method="post" id="regform">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25">
  <input type="submit" value="Apply">
</form>

核心修改说明 #

• 给回填逻辑加了非空判断，只有sessionStorage中存在有效姓名时才会赋值给输入框，首次访问没有存储值时就会保留原生占位符
• 调整了函数作用域，把存储、回填相关函数移到全局，避免函数内部定义无法调用的问题，同时在校验通过后主动调用存储方法写入sessionStorage
• 移除了行内JavaScript事件，改为在JS中动态绑定，符合要求
• 使用规范的sessionStorage.getItem/setItem方法操作存储，避免直接读取属性返回undefined的异常

内容的提问来源于stack exchange，提问作者user17057025