时间戳

首页 > 解决方案 > 使用 Angular 时应该使用什么样的表单验证？

html - 使用 Angular 时应该使用什么样的表单验证？

问题描述

大家，我对 HTML5 验证和 Angular 表单验证感到困惑。

我想知道在验证表单 HTML5 或 Angular 自己的表单验证方法时应该使用哪种验证。

还请考虑解释：

为什么和为什么不。

哪个更好

哪个更安全。

标签： htmlangular

解决方案

这是两个完全不同的东西。

一方面，您有 HTML 验证。例如 ：

<input type="number" name="hour" min="0" max="23">

这是一个方便的验证：如果你点击箭头来增加值，你不会低于 0 或高于 23。但没有什么能阻止你输入 25。

接下来，您将进行 Angular 的表单验证。例如，在反应形式的情况下

this.form = this.formBuilder.group({
  hours: ['', [Validators.max(23), Validators.min(0)]]
});

这是一个技术验证：Angular 会在你对它进行的每一次更改时检查表单是否有效。

您可以使用this.form.valid和获取表单的状态this.form.invalid。

如果您只依赖 HTML，您将依赖浏览器检查验证的能力。而且它们并没有那么先进。另外，您的用户将能够编辑 DOM 并简单地覆盖您的验证。

在使用 Angular 的每种情况下，都应该使用 HTML 验证和 Angular 的表单验证。前者用于用户体验，后者用于您的业务规则。

推荐阅读