HTML 表单元素中的更改跟踪答案

【问题标题】：Change Tracking in HTML Form ElementsHTML 表单元素中的更改跟踪
【发布时间】：2016-05-30 11:32:54
【问题描述】：

我有一个带有少量输入元素的基本 HTML 表单。

它们是基本的东西，没有单选按钮、复选框或其他任何东西。

目前唯一的输入类型是“number”和“tel”。

如果这些值变脏，我需要启用/禁用保存按钮，但如果用户将“12”更改为“13”（启用保存），我希望它也能够禁用保存按钮，然后恢复为“12”（禁用保存）。

我在这里查看了各种不同的答案、不同的 GitHub 包等。

有人说将它全部存储在全局字典中，其他人说使用 jQuery .serialize()、jQuery.Validation、数据属性等。

我目前正在研究两个基本的 GitHub 包：

https://github.com/rubentd/dirrty

https://github.com/codedance/jquery.AreYouSure

鉴于这是一个具有基本表单的演示项目（但必须以非特定于该表单的方式编写），最简单的方法是什么？

编辑：这与验证无关，如果我不清楚，请见谅。这是检查用户是否进行了任何修改。初始值是在运行时通过 jQuery 添加的，而不是在原始 DOM 中。

【问题讨论】：

“如果这些值变脏，我需要启用/禁用保存按钮，”这是什么意思？
@RichardHamilton 这意味着输入框中的值不符合某些条件，例如需要超过 5 个字符的密码。
@RichardHamilton "Dirty" ... 常用术语。意味着用户改变了一些东西。因此，为什么其中一个 GitHub 包被称为 Dirrty。以及为什么有 SettingsPropertyValue.IsDirty 的 MSDN 文档。不符合 azium 所说的标准，只是意味着“不同”。

标签： javascript jquery html

【解决方案1】：

您可以尝试在 JavaScript 中进行事件处理，即“onchange()”。 onchange 属性会在元素的值发生更改时触发。

它在 HTML 中的语法是：

<element onchange="myScript">

它在 Javascript 中的语法是：

object.onchange=function(){myScript};

更多参考，您可以查看下面的 w3school 链接。

http://www.w3schools.com/jsref/event_onchange.asp

http://www.w3schools.com/tags/ev_onchange.asp

使用上面的 onchange 事件处理程序，现在您可以跟踪您的更改并在更改发生时处理输入。

希望对您有所帮助。

【讨论】：

【解决方案2】：

您可以为此使用https://jqueryvalidation.org/。这可能没有您要查找的验证器，但您可以使用 addMethod() 指定自定义验证规则。这里的例子： https://jqueryvalidation.org/jQuery.validator.addMethod/

如果使用相同的验证方法，也可以从 13 恢复到 12。

jQuery.validator.addMethod("tel", function(value, element) {
   var valid = ... validate logic here;
   if(!valid) {
      $('#tel').val('12'); 
   }
   return valid;
}, "Please enter a correct tel!");

【讨论】：

对不起，如果我不清楚，我已经编辑了帖子，这与验证无关。我需要知道用户在这些输入字段中是否触摸过任何内容。只有当他们改变了某些东西时，才应该启用保存按钮。
这与验证无关，但您尝试实现的行为听起来很像验证（例如，基于表单输入启用/禁用提交）。通过使用 $('input').change() 设置一些变量来检查脏值，然后可以将其与验证器一起使用。这是处理这个问题的“一种”方式。您总是可以选择不使用第三方 jQuery 插件。

【解决方案3】：

我决定选择https://github.com/rubentd/dirrty ..

它“正常工作”并且非常小而且非常简单。

   // Change tracking via dirrty
    $("#myForm").dirrty().on("dirty", function () {
        $("#status").html("dirty");
        $('#saveButton').prop('disabled', false);
    }).on("clean", function () {
        $("#status").html("clean");
        $('#saveButton').prop('disabled', true);
    });

就是这样。

一旦有任何改变，保存按钮就会立即可用。并在恢复原始值后禁用。

【讨论】：

【解决方案4】：

如果你想使用轻量级框架，还有 Backbone model.changed()。

【讨论】：