前言：
在日常开发中，难免会遇到需要监测表单是否被修改的情况，比如我曾经在项目中需要用到一种情况，当用户进入编辑页面后，当他修改了某些内容（包括文本框、下拉框、单选框、多选框等等），则需要将保存按钮激活，否则禁用。在查找了很多资料后，我发现了一个可以实现这个功能的 npm 包，那就是 au-dirty。
一、前置知识
在使用 au-dirty 前，你需要先了解：
- 什么是 npm 包（懂得可以跳过）；
- 要在项目中使用 npm 包，必须先安装 Node.js。
这里不再赘述，具体请移步 Node.js 和 npm 官网。
二、安装
使用 au-dirty 的前提条件就是，你的项目中已经安装了 aurelia 框架。
通过以下命令可以安装 au-dirty：
npm install au-dirty --save-dev
其中，“--save-dev”指定了将该包添加到开发环境的依赖中。
三、基本用法
- 引入 au-dirty：
在你需要使用 au-dirty 的页面中，首先需要引入 au-dirty。以 TypeScript 为例，在你的类内部加入以下代码：
-- -------------------- ---- -------
------ - -- -- ---- --------------------
------ - -- ----- ---- -----------
------ ----- ---- -
------- ------------- -------------------
------------- -
----------------- - --- ---------------------
-
-- 监测表单：
如上代码所示，首先定义了一个 DirtyChecker 实例。这个实例是用来监测表单是否被修改的。具体来说，au-dirty 通过监听表单元素的 “blur” 事件、文本框的 “input” 事件等来监测表单的修改。
在页面DOM加载的时候，需要将页面中所有要监测的表单注册到 dirtyChecker 中。比如：
-- -------------------- ---- -------
------ ---------- -
-----------------------------
--- --------------------------------------------------
--- -------------------------------------------------
--- ----------------------------------------------------
--- -----------------------------------------------------
--- --------------------------------------------------
---
-上述代码的意思是，在页面加载完成后，将表单中的 name、age、gender、address 和 email 等输入框注册到 dirtyChecker 中进行监听。
- 监测表单变化：
当表单中的某个值被修改时，dirtyChecker 会将它设为 dirty ，并给出提示。
public submit() {
if (this.dirtyChecker.isDirty()) {
console.log('表单已被修改！');
} else {
console.log('表单未被修改！');
}
}上述代码是当用户点击保存时，会触发该函数。如果表单已被修改，则弹出提示“表单已被修改！”；否则，弹出提示“表单未被修改！”。
四、实际应用
在实际开发中，我们需要监测的表单可能不止一个，而且可能包括更多元素（比如下拉框、单选框、多选框等）。此时，我们可以定义一个函数，用来将页面中所有需要监测的表单加入 dirtyChecker 中。比如：
-- -------------------- ---- -------
------- ---------------- -
----- ------ - -
--- ---------------------------------------------------
--- ----------------------------------------------------
--- ------------------------------------------------------
--- --------------------------------------------------
--- ---------------------------------------------------
--- ---------------------------------------------------
--- -----------------------------------------------------
--- ---------------------------------------------------------
--- ------------------------------------------------------
--
------------------------------------
-在页面加载完成后，我们只需要调用 registerFields() 函数就可以将所有的表单加入 dirtyChecker 中。
五、总结
以上就是我对 npm 包 au-dirty 的使用教程。该包可以很方便地监测表单是否被修改，非常适合用在一些需要实时监测表单状态的场景下。希望对大家有所帮助。
完整示例代码：（HTML 和 TypeScript 版本都包含在内）
-- -------------------- ---- -------
----------
---- ---------------------
---- -------------------
------ -----------------------
------ -------------------- ---------- ---------------------- ---------- ------------------ --
------
---- -------------------
------ --------------------------
------- -------------------- ------------- ---------------------------
------- ----------------------------------------
------- --------------------------------
------- --------------------------------
---------
------
---- -------------------
------ ------------------------
------ -------------------- ----------- ----------------------- ---------- ---------------------
------
---- -------------------
------ --------------------------
------ -------------------- ------------ ------------------------ ---------- -------------------- --
------
---- -------------------
------ -------------------------------
------ -------------------- ---------------- ----------- ---------------------------- ---------- ------------------------ --------------------------
------
---- -------------------
------ -----------------------
------ -------------------- ---------- ------------- ---------------------- ---------- ---------------------- --
------
---- -------------------
------ ----------------------
--------- -------------------- --------- -------- --------------------- ---------- -----------------------------
------
---- -------------------
------ -----------------------
------ ----------- ------------------------- ------------
---- ----------------------- - ------------------------ - ---------- - -----
------
---- -------------------
------ --------------- ------------------------ -------------- ---------------------------------
------ ------------------------ ---------------------------
------
------- ------------- ------------------------- ---------- ----------- ----- ----------- ---------------------------------------------------
------
-----------
------- ----------
------ - -- -- ---- --------------------
------ - -- ----- ---- -----------
------ ----- ---- -
------------ ----- ----
------- ---------------
------- ------------- -------------------
------------- -
----------------- - --- ---------------------
-
------ ---------- -
----------------------
-
------- ---------------- -
----- ------ - -
--- ---------------------------------------------------
--- ----------------------------------------------------
--- ------------------------------------------------------
--- --------------------------------------------------
--- ---------------------------------------------------
--- ---------------------------------------------------
--- -----------------------------------------------------
--- ---------------------------------------------------------
--- ------------------------------------------------------
--
------------------------------------
-
------ -------- -
-- ----------------------------- -
-----------------------
- ---- -
-----------------------
-
-
------- --- ----------- ----------- -
------ ------------------------------------------
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c2c81e8991b448ebbae