javascript - 表单输入掩码以获得更漂亮的数据

Question

我有一个大表单，它只是带有 jQ​​uery 的 native Web 内容。它有很多字段，比如 200 个，我们会定期添加和删除字段。我请求让所有数字都以逗号作为千位分隔符显示，并且日期始终以本地化格式显示。

现在，现在只会以原始格式显示:10000000。目标是在输入中显示 10,000,000。

我不想触及数据库更新的服务器端代码，因此将客户端上的所有逻辑保留在 JavaScript 中。用户也可以正常输入信息，但是一旦完成，它可能会显示带有逗号的任何数字。 toLocalizedString 通常适用于此。然后问题出现了:提交表单时，我需要删除数字中的所有逗号。

我开始捕获输入事件，检查其中是否有数字，并添加逗号。然后在提交时我需要一个例程来删除逗号，但前提是它们是由我的程序放入的。

我觉得我以前见过这样的功能，但我还没有找到完美的解决方案。数据的源格式和向用户显示的格式之间需要存在一些分歧。我希望能够向用户展示其数据的表示形式，而无需实际更改单元格中的数据。不确定是否可能。

我在想这个问题可能有一些优雅的解决方案。

Answer 1

执行此操作的通用方法是拥有一个具有实际(键入的)值(例如数字)的模型，以及一个具有格式化显示字符串的 View 模型。

例如。 (伪代码):

class Model {
    value: number
}

class ViewModel {
    value: string
}

class ViewModelMapper {
    toModelView(model: Model): ModelView {
    }
    toModel(modelView: ModelView): Model {
    }
}

从服务器加载数据时，您需要进行从模型到 View 模型的转换，然后再保存到服务器。您将使用 View 模型在 UI 中显示数据，并使用模型与后端进行通信。

您可以使用现有的输入掩码库，这些库已经在执行这些操作。例如，参见jQuery-Mask-Plugin .

这个问题有点笼统，也许您想添加一些具体细节。