在表单验证方面,Vuetify拥有集成了众多的功能,想要使用第三方验证插件?您可以开箱即用Vee-validate和Vuelidate。

1、v-form表单

1.1、v-form的属性和方法

v-form表单的常用属性:
(1)lazy-validation:如果启用,value将永远是 true ,除非有可见的验证错误。您仍然可以调用validate()来手动触发验证;布尔类型,默认值为false。
(2)value:true,代表表单验证通过;false,代表表单验证失败;布尔类型,默认值为false。
v-form的常用方法
(1)validate:校验整个表单数据,前提是你写好了校验规则。返回Boolean表示校验成功或失败。
(2)reset:重置表单数据。

1.2、v-form案例

1、官网案例

<template>
  <v-form ref="form" v-model="valid" lazy-validation>
    <v-text-field
      v-model="name"
      :rules="nameRules"
      :counter="10"
      label="Name"
      required
    ></v-text-field>
    <v-text-field
      v-model="email"
      :rules="emailRules"
      label="E-mail"
      required
    ></v-text-field>
    <v-select
      v-model="select"
      :items="items"
      :rules="[v => !!v || 'Item is required']"
      label="Item"
      required
    ></v-select>
    <v-checkbox
      v-model="checkbox"
      :rules="[v => !!v || 'You must agree to continue!']"
      label="Do you agree?"
      required
    ></v-checkbox>

    <v-btn
      :disabled="!valid"
      @click="submit"
    >
      submit
    </v-btn>
    <v-btn @click="clear">clear</v-btn>
  </v-form>
</template>

2、项目中案例

      我们在data中定义一个valid属性,跟表单的value进行双向绑定,观察表单是否通过校验,同时把等会要跟表单关联的品牌brand对象声明出来:

export default {
    name: "my-brand-form",
    data() {
      return {
        valid:false, // 表单校验结果标记
        brand:{
          name:'', // 品牌名称
          letter:'', // 品牌首字母
          image:'',// 品牌logo
          categories:[], // 品牌所属的商品分类数组
        }
      }
    }
  }

而在表单中只需要这么写

<v-form v-model="valid">

</v-form>

 2、表单校验

Vuetify的表单校验,是通过rules属性来指定的:
(1)规则是一个数组;
(2)数组中的元素是一个函数,该函数接收表单项的值作为参数,函数返回值两种情况:
  - 返回true,代表成功,
  - 返回错误提示信息,代表失败。

 

【例子】

规则

nameRules:[
    v => !!v || "品牌名称不能为空",
    v => v.length > 1 || "品牌名称至少2位"
],
letterRules:[
    v => !!v || "首字母不能为空",
    v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
]

页面中

<v-text-field v-model="brand.name" label="请输入品牌名称" required :rules="nameRules" />
<v-text-field v-model="brand.letter" label="请输入品牌首字母" required :rules="letterRules" />

 

Logo

前往低代码交流专区

更多推荐