时间戳

首页 > 解决方案 > 表单提交时的 sessionStorage

javascript - 表单提交时的 sessionStorage

问题描述

我正在创建一个表单，并且该onsubmit属性有一个表单验证布尔方法。在方法结束时，不管是否没有返回无效输入false，sessionStorage变量都将被更新为，true以便在再次加载页面时重新检查变量。false为什么无论输入都没有返回，变量仍然是false？请记住，表单action属性指向同一页面（表单页面）。这就是我的验证的样子：

<form action="form.jsp" onsubmit="return validate()">
   <input type="text" id="foo" />
   <input type="submit">
</form>

var input=document.getElementById("foo"); // textbox
function validate()
{
   if (input.value.trim() === "") {
      return false;
   }
   sessionStorage.setItem("submitted","true");
}

请记住，所有表单输入都存在，并且即使函数没有返回 sessionStorage 变量也不会更新false。

标签： javascriptdom

解决方案

尝试将 sessionStorage 调用包装在 try/catch 中以查看失败的原因。

function validate() {
  var input = document.getElementById("foo"); // textbox
  console.log('validate', input);
  if (input.value.trim() === "") {
    return false;
  }
  try {
    sessionStorage.setItem("submitted", "true");
  } catch (e) {
    console.log(e);
    return false;
  }

  // (for demostration purposes return false)
  return false;
}
<form onsubmit="return validate()">
  <input type="text" id="foo" />
  <input type=submit>
</form>

或者，您可以使用 DevTools 中的“保留日志”复选框来保留控制台错误。

推荐阅读