1

我目前正在构建一个脚本，它将在用户离开页面之前通知用户表单已更改（顺便说一句，这是一个 ASP.NET MVC 应用程序）。

我首先开始构建一个简单的脚本，该脚本检测用户是否更改了任何输入，然后稍微翻转以将表单指定为“脏”。

这最终太简单了，并且缺乏对扩展表单输入的支持，所以我接下来尝试了一个插件。

我能找到的最好的是：http: //mal.co.nz/code/jquery-dirty-forms/

这个 jquery 脏表单插件工作得很好，但仍然缺少我需要的一个重要功能；将以前的值与用户输入的值进行比较的能力。

例如，如果一个文本字段最初的值为“Foo Bar”，而用户将该值更改为“Foo”，则该表单现在是脏的。

当用户将该文本框的值更改回“Foo Bar”时，然后使用此插件，表单仍然是“脏”的，这根据我的要求是不正确的。

没有插件可以满足我的需要，所以我必须自己构建，这引出了我的问题：构建这种功能的最佳实践是什么？

我的想法是这样的：

  • 由于这个应用程序是 MVC，我可以使用以下技术：
    • jQuery
    • json
    • 数据注释

我最初的想法是：

  • 页面可以有多种形式；每个表单都有一个属性“isDirty”，最初设置为 false。
  • 我需要存储每个字段的原始值以进行比较（纪念品）
  • 每个字段都可以有一个类/标志/属性“isDirty”，它将调用该字段“突出显示等”
  • 我可以将这些字段值存储在 JSON NVP 数据结构中
  • 在提交时，JavaScript 将遍历该 JSON 字符串并查看原始值，与当前值进行比较，如果它无效，那么它将在违反脏规则的文本字段中添加“脏”标志（附加类名） .

性能和可重用性是明确的考虑因素。我应该能够将此模式应用于任何形式，并且只需很少的工作就可以让它使用原始值并执行验证。

有没有人看到与我的需求相似的现有模式？我的想法听起来可行吗？有人对我可以采取的更好路线提出意见吗？让我开始使用我可以扩展的代码示例会很棒，伪代码也很好。

[更新]

有人刚刚告诉我我正在尝试做的事情通常被称为“表单存储”，尽管谷歌对这个搜索词没有多大帮助。

我一直在使用的这个脚本与我想做的类似：（从此页面：http ://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-变化/ )

 var formChanged = false;

$(document).ready(function() {
 $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i)     {
      $(this).data('initial_value', $(this).val());
 });

 $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
      if ($(this).val() != $(this).data('initial_value')) {
           handleFormChanged();
      }
 });

 $('#my_form .editable').bind('change paste', function() {
      handleFormChanged();
 });

 $('.navigation_link').bind("click", function () {
      return confirmNavigation();
 });
});

function handleFormChanged() {
 $('#save_or_update').attr("disabled", false);
 formChanged = true;
}

 function confirmNavigation() {
    if (formChanged) {
         return confirm('Are you sure? Your changes will be lost!');
    } else {
      return true;
    }
  }
4

2 回答 2

0

我找到了一个我更喜欢这个插件的“表单存储”的实现：https ://github.com/bcswartz/dirtyFields-jQuery-Plugin

文档可在作者的网站上找到：http ://www.thoughtdelimited.org/dirtyFields/index.cfm

不同之处在于dirtyFields 插件仅处理脏字段和表单。dirtyForms 插件还尝试连接 onbeforeunload 事件。

于 2013-04-02T14:56:34.613 回答
0

Dirty Forms 2.0.0 版$('#theform').dirtyForms()现在在首次调用时跟踪字段的状态。如果字段与原始状态不匹配，则认为它们是脏的，如果它们匹配，则认为它们是干净的。

在您调用 之前都是如此$('#theform').dirtyForms('setClean')，之后会为当前状态拍摄新快照，并且与此新状态的任何偏差都将被视为脏。

于 2015-07-28T13:01:55.273 回答