0

我有一个同时具有服务器端和客户端验证的表单。它是一个编辑表单，因此原始用户值最初是预先填充的。

e.g. The original pre-populated values are:
username = yeo
surname = yang
phonenumber = 11-12345

现在，用户对以下内容进行编辑并提交。

e.g. The edited submitted values are:
username = yeoNew
surname = yangNew
phonenumber = 12-1111

这被提交到服务器端并且服务器端验证失败，因为不允许以 12 开头的电话号码。

无论如何，因此表单将显示回给用户

e.g. The redisplayed form values are:
username = yeoNew
surname = yangNew
phonenumber = 12-1111

这是因为我的表单允许用户记住他们提交的值。

在这个阶段，我想让用户能够使用客户端 javascript 将表单值重置为原始值。这就像一个重置功能。

e.g. The reset button will restore the form values to:
username = yeo
surname = yang
phonenumber = 11-12345

此重置功能的原因是我希望用户可以选择从原始值再次编辑电话号码。

我的问题是：跟踪 HTML 中的原始值以便我可以使用 javascript 恢复它的好方法是什么？

我正在考虑表单元素中一个名为 orig='' 的新属性，它将存储该值。这是一个好主意吗？还有其他方法吗？

谢谢

4

1 回答 1

1

我会使用 HTML5 本地存储。见http://www.w3schools.com/html/html5_webstorage.asp

使用 jquery 我会这样做：

   <script type="text/javascript">
      function load() {
        if (localStorage["username"]) {
            $('#username').val(localStorage["username"]);
        }
        if (localStorage["surname"]) {
            $('#surname').val(localStorage["surname"]);
        }
        if (localStorage["phone"]) {
            $('#phone').val(localStorage["phone"]);
        }
      }

      function save() {
        localStorage["username"] =  $('#username ').val();
        localStorage["surname"] =  $('#surname').val();
        localStorage["phone"] =  $('#phone').val();
      }
   </script>
于 2013-03-25T02:44:31.007 回答