Vuetify

商店

企业版

当涉及到表单验证时,Vuetify 具有大量的集成和功能。 是否要使用第三方验证插件? 开箱即用,您可以使用 Vee-validatevuelidate

内部的 v-form 组件使添加验证到表单输入变得容易。 所有输入组件都有一个“ rules 属性,该属性带有一系列功能。 这些函数允许您指定字段为validinvalid 的条件。 每当输入值更改时,数组中的每个函数都将接收新值。 如果函数返回 false 或字符串,则验证失败。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

规则允许您在所有表单组件上应用自定义验证。 这些将按顺序进行验证,并且一次将显示 maximum 或者 1 个错误,因此请确保您相应地创建规则。

v-form 组件具有 three 功能,可以通过在该组件上设置 ref 来访问它们。 ref 允许我们访问组件上的内部方法,例如 <v-form ref="form">this.$refs.form.validate() 将验证所有输入并返回所有输入是否有效。 this.$refs.form.reset() 将清除所有输入并重置其验证错误。this.$refs.form.resetValidation() 将仅重置输入验证,而不会更改其状态。

vuelidate 是 Vue.js 的简单、轻量模型验证。Documentation

vee-validate 是用于 Vue.js 的基于模板的验证框架。文档

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!