JavaScript 中的约束验证概述

为应用程序添加约束验证

我们在《使用原生 JavaScript 构建最小化 Web 应用的七步指南》中讨论的最小 JavaScript 前端 Web 应用，仅支持数据管理应用的最基本功能。例如，它并未阻止用户向应用数据库中输入无效数据。在本章中，我们将探讨如何在 JavaScript 模型类中表达完整性约束，并如何在应用的模型部分以及使用 HTML5 构建的用户界面中执行约束验证。

由于使用新的 HTML5 input 字段类型和验证属性（如 required、min、max 和 pattern）意味着在用户界面中定义约束，这并不符合最佳实践——在最佳实践中，约束应仅在模型层进行检查，而不在 UI 层定义。

因此，我们不会使用 HTML5 的新特性来在用户界面中定义约束。相反，我们将使用 HTML5 表单验证 API 中的两种方法：

1. setCustomValidity：通过赋值为空字符串或非空的（表示违反约束的）错误消息字符串，来标记表单字段为有效或无效。

2. checkValidity：在用户输入数据被提交或保存之前（例如表单提交时）调用该方法，用于检测所有字段是否都具有有效值。

对于两种特殊类型的属性（其值为日期或颜色），建议使用 HTML5 提供的新式 UI 控件来选择日期或颜色（对应相应的 input 字段类型）。