javascript - 避免 "undo"表单上的后退按钮历史记录条目

Question

令我惊讶的是，我找不到有关该主题的任何信息，但是搜索此类内容总是会产生很多相似但不相关的内容...

无论如何，一些注意事项以避免误解:- 问题与 HTML、HTTP、Javascript 和浏览器行为有关。我故意不谈论服务器端技术，因为我认为使该部分工作对我来说不是问题。- 我的目的不是为了安全，也不想限制用户的行为。事实上，我想改进用户界面。

假设我们有一个带有 POST-redirect-GET 表单的 HTML 页面。提交表单会导致服务器端验证，然后是结果或验证错误。现在假设需要进行几次尝试才能使所有值都有效。尽管我尝试使用更改的 URL，但 URL 保持不变。现在，用户查看结果，然后想要返回到链接到表单的任何页面。对于一个漂亮的用户界面，应该单击后退按钮两次，一次从结果页面返回到表单，再一次单击返回到表单之前的页面。然而，用户必须点击每一次失败的尝试才能输入有效值。

如何避免这种情况？再次注意，我不想向用户“隐藏”任何内容，只是没有实际情况表明无效的表单值有用。我发现提示“单页应用程序”由于未填充历史记录而遭受相关问题，但这实际上是相反的问题，而且我的应用程序不是“单页”。

作为避免历史条目的替代方法，我也完全可以以某种方式回避问题，甚至围绕它构建一个良好的用户界面。但现在，按钮显示“返回”(在导航意义上)，但对表单执行“撤消”(在更改值意义上)。人们期望后退按钮能够返回——他们已经有了用于撤消的 ctrl-z。

最简单的解决方案——虽然我找不到类似的东西——是一个 HTTP header ，上面写着:“这是您之前请求的同一资源的更新版本，请注意它如何具有相同的 URL，所以不要按下后退按钮时不要让它出现两次”。

Answer 1

我认为最简单的方法是使用 ajax 来处理表单提交，即使它是多部分表单。

我将结合使用客户端验证，以便更快地向用户提供反馈，然后在收到来自 ajax 请求的返回数据时处理服务器端验证错误。

使用此方法，您的浏览器历史记录应该相对保留，并且不会充满成功/失败表单提交。

我个人喜欢这个客户端引导验证器插件:

https://github.com/1000hz/bootstrap-validator

当我收到服务器返回的错误消息时，我还使用它来更新界面。