表单 (Forms)

Vuetify 提供了一个基于函数即规则的简单内置表单验证系统，使开发人员可以轻松快速地进行设置。

使用

v-form 组件可以轻松地向表单输入添加验证。所有输入组件都有一个 rules 属性，可用于指定输入 有效 或 无效 的条件。

TIP

如果您更喜欢使用第三方验证插件，我们提供了集成 Vee-validate 和 vuelidate 验证库的示例，具体内容请见页面下方例子。

每当输入的值发生更改时，每个规则都会收到一个新值并重新评估。如果规则返回 false 或 string ，则验证失败，并且 string 值将显示为错误消息。

API

组件	描述
v-form	主要组件

规则

规则允许您对所有表单组件应用自定义验证。这些按顺序进行验证，组件一次 最多 显示 1 个错误；因此，请确保按照您的规则进行排序。

最基本的规则是一个简单的函数，用于检查输入是否有值；即它使其成为必需的输入。

然而，您可以根据需要制定尽可能复杂的规则，甚至允许进行异步输入验证。在下面的示例中，输入将根据一个模拟的 API 服务进行检查，该服务需要一些时间来响应。等待 submit 事件的 promise 解析，并查看验证的效果。

提交事件是原生 SubmitEvent 与 Promise 的组合，因此可以 await 或与 .then() 一起使用来获取验证结果。

这也演示了 validate-on 属性，该属性告诉 v-form 组件何时进行验证。在这里，我们将其设置为 'submit lazy'，这样我们只在点击按钮时调用 API 服务。

验证状态

默认情况下，所有输入在安装时都会运行其验证规则，但不会向用户显示错误。
When rules run is controlled with the validate-on prop which accepts a string containing input, blur, submit, or lazy. 规则运行的时间由 validate-on 属性控制，该属性接受包含 input, blur, submit, 或 lazy 的字符串。
input、blur 和 submit 设置了第一次验证错误可以显示给用户的时机，而 lazy 在挂载时禁用了验证（对于异步规则很有用）。
lazy 可以与其他选项组合，并且单独使用时意味着 input。

validate-on=	"input"	"blur"	"submit"	"lazy"
On mount	✅	✅	✅	❌
On input	✅	❌	❌	*
On blur	✅	✅	❌	*
On submit	✅	✅	✅	*

* 使用与其组合的任何内容的行为。

使用 v-model 或提交事件访问表单的当前验证状态。它可以处于以下三种状态之一：

• true: 所有具有验证规则的输入均已成功验证。
• false: 至少一项输入未通过交互或手动验证进行验证。
• null: 至少一项输入在没有交互的情况下验证失败，或者由于 lazy 验证而尚未验证。

这允许您使用 !valid 检查任何验证失败，或者仅使用 valid === false 检查向用户显示的错误。

示例

属性

禁用

您可以通过设置 disabled 属性轻松禁用 v-form 中的所有输入组件。

Fast fail

当设置 fast-fail 属性时, 发现第一个无效输入后验证将短路。如果您的某些规则计算量很大并且可能需要很长时间，这可能会很有用。 在这个例子中, 请注意，当单击提交按钮时，第二个输入不会显示验证错误，即使它不满足规则。

其他

公开的属性

v-form 组件有许多公开的属性，可以通过在组件上设置 ref 来访问。ref 允许我们在组件上访问内部方法。您可以在 API 页面上找到所有这些属性，但一些常用的包括 validate()、reset() 和 resetValidation()。

reset() 和 resetValidation() 的区别在于前者重置输入值和验证状态，而后者仅重置验证状态。

Vee-validate

可以在 此处 找到 vee-validate 文档 。

验证

vuelidate 文档可以在 这里 找到 。