vform

本文中我们以Vuetify中的v-text-field组件为例总结Vuetify内置的表单校验规则支持。 要点 要向字段添加验证，我们必须做两件事： 将字段设为必填字段 为字段创建验证规则 参考下面的例子： required是HTML5新引入的一个属性，required 属性规定必需在表单提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 【注释】required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 解析 Vuetify官方仅仅简单地给出v-text-field组件中属性(Prop) rules的基本介绍，如下图，并没有给出详细的使用举例： 结合网络上已有使用经验，可以得出的结论是：对于少量基本的表单组件的规则校验可以使用上面的required属性及这里的Vuetify组件中专有的rules属性实现支持。事实上，第一个图中已经给出了使用格式。 上面使用的校验规则如下： 基础型举例 对于上面例子的更复杂实用一点的版本如下： 然后，在data中定义如下规则： v-form校验与提交操作 v-form组件提供了三个功能与校验操作相关，我们可以通过在组件上设置ref来访问它们。例如，<v