表单

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

用例

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

template script

  1. <template>
  2.   <v-form v-model="valid">
  3.     <v-container>
  4.       <v-row>
  5.         <v-col
  6.           cols="12"
  7.           md="4"
  8.         >
  9.           <v-text-field
  10.             v-model="firstname"
  11.             :rules="nameRules"
  12.             :counter="10"
  13.             label="First name"
  14.             required
  15.           ></v-text-field>
  16.         </v-col>
  18.         <v-col
  19.           cols="12"
  20.           md="4"
  21.         >
  22.           <v-text-field
  23.             v-model="lastname"
  24.             :rules="nameRules"
  25.             :counter="10"
  26.             label="Last name"
  27.             required
  28.           ></v-text-field>
  29.         </v-col>
  31.         <v-col
  32.           cols="12"
  33.           md="4"
  34.         >
  35.           <v-text-field
  36.             v-model="email"
  37.             :rules="emailRules"
  38.             label="E-mail"
  39.             required
  40.           ></v-text-field>
  41.         </v-col>
  42.       </v-row>
  43.     </v-container>
  44.   </v-form>
  45. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       valid: false,
  5.       firstname: '',
  6.       lastname: '',
  7.       nameRules: [
  8.         v => !!v || 'Name is required',
  9.         v => v.length <= 10 || 'Name must be less than 10 characters',
  10.       ],
  11.       email: '',
  12.       emailRules: [
  13.         v => !!v || 'E-mail is required',
  14.         v => /.+@.+/.test(v) || 'E-mail must be valid',
  15.       ],
  16.     }),
  17.   }
  18. </script>

Forms（表单） - 图1

API

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

Forms（表单） - 图2

实战场

template script

  1. <template>
  2.   <v-row align="center">
  3.     <v-row justify="space-around">
  4.       <v-switch v-model="valid" class="ma-4" label="Valid" readonly></v-switch>
  5.       <v-switch v-model="lazy" class="ma-4" label="Lazy"></v-switch>
  6.     </v-row>
  7.     <v-form
  8.       ref="form"
  9.       v-model="valid"
  10.       :lazy-validation="lazy"
  11.     >
  12.       <v-text-field
  13.         v-model="name"
  14.         :counter="10"
  15.         :rules="nameRules"
  16.         label="Name"
  17.         required
  18.       ></v-text-field>
  20.       <v-text-field
  21.         v-model="email"
  22.         :rules="emailRules"
  23.         label="E-mail"
  24.         required
  25.       ></v-text-field>
  27.       <v-select
  28.         v-model="select"
  29.         :items="items"
  30.         :rules="[v => !!v || 'Item is required']"
  31.         label="Item"
  32.         required
  33.       ></v-select>
  35.       <v-checkbox
  36.         v-model="checkbox"
  37.         :rules="[v => !!v || 'You must agree to continue!']"
  38.         label="Do you agree?"
  39.         required
  40.       ></v-checkbox>
  42.       <v-btn
  43.         :disabled="!valid"
  44.         color="success"
  45.         class="mr-4"
  46.         @click="validate"
  47.       >
  48.         Validate
  49.       </v-btn>
  51.       <v-btn
  52.         color="error"
  53.         class="mr-4"
  54.         @click="reset"
  55.       >
  56.         Reset Form
  57.       </v-btn>
  59.       <v-btn
  60.         color="warning"
  61.         @click="resetValidation"
  62.       >
  63.         Reset Validation
  64.       </v-btn>
  65.     </v-form>
  66.   </v-row>
  67. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       valid: true,
  5.       name: '',
  6.       nameRules: [
  7.         v => !!v || 'Name is required',
  8.         v => (v && v.length <= 10) || 'Name must be less than 10 characters',
  9.       ],
  10.       email: '',
  11.       emailRules: [
  12.         v => !!v || 'E-mail is required',
  13.         v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
  14.       ],
  15.       select: null,
  16.       items: [
  17.         'Item 1',
  18.         'Item 2',
  19.         'Item 3',
  20.         'Item 4',
  21.       ],
  22.       checkbox: false,
  23.       lazy: false,
  24.     }),
  26.     methods: {
  27.       validate () {
  28.         this.$refs.form.validate()
  29.       },
  30.       reset () {
  31.         this.$refs.form.reset()
  32.       },
  33.       resetValidation () {
  34.         this.$refs.form.resetValidation()
  35.       },
  36.     },
  37.   }
  38. </script>

Forms（表单） - 图3

示例

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

创建规则

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

template script

  1. <template>
  2.   <v-container>
  3.     <v-row
  5.       justify="space-between"
  6.     >
  7.       <v-col
  8.         cols="12"
  9.         md="4"
  10.       >
  11.         <v-form ref="form">
  12.           <v-text-field
  13.             v-model="model"
  14.             :counter="max"
  15.             :rules="rules"
  16.             label="First name"
  17.           ></v-text-field>
  18.         </v-form>
  19.       </v-col>
  21.       <v-col
  22.         cols="12"
  23.         md="6"
  24.       >
  25.         <v-slider
  26.           v-model="max"
  27.           label="Max characters"
  28.         >
  29.         </v-slider>
  31.         <v-checkbox
  32.           v-model="allowSpaces"
  33.           label="Allow spaces"
  34.         ></v-checkbox>
  36.         <v-text-field
  37.           v-model="match"
  38.           label="Value must match"
  39.         ></v-text-field>
  40.       </v-col>
  41.     </v-row>
  42.   </v-container>
  43. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       allowSpaces: false,
  5.       match: 'Foobar',
  6.       max: 0,
  7.       model: 'Foobar',
  8.     }),
  10.     computed: {
  11.       rules () {
  12.         const rules = []
  14.         if (this.max) {
  15.           const rule =
  16.             v => (v || '').length <= this.max ||
  17.               `A maximum of ${this.max} characters is allowed`
  19.           rules.push(rule)
  20.         }
  22.         if (!this.allowSpaces) {
  23.           const rule =
  24.             v => (v || '').indexOf(' ') < 0 ||
  25.               'No spaces are allowed'
  27.           rules.push(rule)
  28.         }
  30.         if (this.match) {
  31.           const rule =
  32.             v => (!!v && v) === this.match ||
  33.               'Values do not match'
  35.           rules.push(rule)
  36.         }
  38.         return rules
  39.       },
  40.     },
  42.     watch: {
  43.       match: 'validateField',
  44.       max: 'validateField',
  45.       model: 'validateField',
  46.     },
  48.     methods: {
  49.       validateField () {
  50.         this.$refs.form.validate()
  51.       },
  52.     },
  53.   }
  54. </script>

Forms（表单） - 图4

验证与 提交 & 清除

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

template script

  1. <template>
  2.   <v-form
  3.     ref="form"
  4.     v-model="valid"
  5.     lazy-validation
  6.   >
  7.     <v-text-field
  8.       v-model="name"
  9.       :counter="10"
  10.       :rules="nameRules"
  11.       label="Name"
  12.       required
  13.     ></v-text-field>
  15.     <v-text-field
  16.       v-model="email"
  17.       :rules="emailRules"
  18.       label="E-mail"
  19.       required
  20.     ></v-text-field>
  22.     <v-select
  23.       v-model="select"
  24.       :items="items"
  25.       :rules="[v => !!v || 'Item is required']"
  26.       label="Item"
  27.       required
  28.     ></v-select>
  30.     <v-checkbox
  31.       v-model="checkbox"
  32.       :rules="[v => !!v || 'You must agree to continue!']"
  33.       label="Do you agree?"
  34.       required
  35.     ></v-checkbox>
  37.     <v-btn
  38.       :disabled="!valid"
  39.       color="success"
  40.       class="mr-4"
  41.       @click="validate"
  42.     >
  43.       Validate
  44.     </v-btn>
  46.     <v-btn
  47.       color="error"
  48.       class="mr-4"
  49.       @click="reset"
  50.     >
  51.       Reset Form
  52.     </v-btn>
  54.     <v-btn
  55.       color="warning"
  56.       @click="resetValidation"
  57.     >
  58.       Reset Validation
  59.     </v-btn>
  60.   </v-form>
  61. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       valid: true,
  5.       name: '',
  6.       nameRules: [
  7.         v => !!v || 'Name is required',
  8.         v => (v && v.length <= 10) || 'Name must be less than 10 characters',
  9.       ],
  10.       email: '',
  11.       emailRules: [
  12.         v => !!v || 'E-mail is required',
  13.         v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
  14.       ],
  15.       select: null,
  16.       items: [
  17.         'Item 1',
  18.         'Item 2',
  19.         'Item 3',
  20.         'Item 4',
  21.       ],
  22.       checkbox: false,
  23.     }),
  25.     methods: {
  26.       validate () {
  27.         this.$refs.form.validate()
  28.       },
  29.       reset () {
  30.         this.$refs.form.reset()
  31.       },
  32.       resetValidation () {
  33.         this.$refs.form.resetValidation()
  34.       },
  35.     },
  36.   }
  37. </script>

Forms（表单） - 图5

Vue School

Learn Vue.js and modern and cutting-edge front-end technologies with our premium tutorials and video courses.

ads by Vuetify

](https://vueschool.io/?ref=vuetifyjs.com&friend=vuetify)

验证

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

template script

  1. <template>
  2.   <form>
  3.     <v-text-field
  4.       v-model="name"
  5.       :error-messages="nameErrors"
  6.       :counter="10"
  7.       label="Name"
  8.       required
  9.       @input="$v.name.$touch()"
  10.       @blur="$v.name.$touch()"
  11.     ></v-text-field>
  12.     <v-text-field
  13.       v-model="email"
  14.       :error-messages="emailErrors"
  15.       label="E-mail"
  16.       required
  17.       @input="$v.email.$touch()"
  18.       @blur="$v.email.$touch()"
  19.     ></v-text-field>
  20.     <v-select
  21.       v-model="select"
  22.       :items="items"
  23.       :error-messages="selectErrors"
  24.       label="Item"
  25.       required
  26.       @change="$v.select.$touch()"
  27.       @blur="$v.select.$touch()"
  28.     ></v-select>
  29.     <v-checkbox
  30.       v-model="checkbox"
  31.       :error-messages="checkboxErrors"
  32.       label="Do you agree?"
  33.       required
  34.       @change="$v.checkbox.$touch()"
  35.       @blur="$v.checkbox.$touch()"
  36.     ></v-checkbox>
  38.     <v-btn class="mr-4" @click="submit">submit</v-btn>
  39.     <v-btn @click="clear">clear</v-btn>
  40.   </form>
  41. </template>
  1. <script>
  2.   import { validationMixin } from 'vuelidate'
  3.   import { required, maxLength, email } from 'vuelidate/lib/validators'
  5.   export default {
  6.     mixins: [validationMixin],
  8.     validations: {
  9.       name: { required, maxLength: maxLength(10) },
  10.       email: { required, email },
  11.       select: { required },
  12.       checkbox: {
  13.         checked (val) {
  14.           return val
  15.         },
  16.       },
  17.     },
  19.     data: () => ({
  20.       name: '',
  21.       email: '',
  22.       select: null,
  23.       items: [
  24.         'Item 1',
  25.         'Item 2',
  26.         'Item 3',
  27.         'Item 4',
  28.       ],
  29.       checkbox: false,
  30.     }),
  32.     computed: {
  33.       checkboxErrors () {
  34.         const errors = []
  35.         if (!this.$v.checkbox.$dirty) return errors
  36.         !this.$v.checkbox.checked && errors.push('You must agree to continue!')
  37.         return errors
  38.       },
  39.       selectErrors () {
  40.         const errors = []
  41.         if (!this.$v.select.$dirty) return errors
  42.         !this.$v.select.required && errors.push('Item is required')
  43.         return errors
  44.       },
  45.       nameErrors () {
  46.         const errors = []
  47.         if (!this.$v.name.$dirty) return errors
  48.         !this.$v.name.maxLength && errors.push('Name must be at most 10 characters long')
  49.         !this.$v.name.required && errors.push('Name is required.')
  50.         return errors
  51.       },
  52.       emailErrors () {
  53.         const errors = []
  54.         if (!this.$v.email.$dirty) return errors
  55.         !this.$v.email.email && errors.push('Must be valid e-mail')
  56.         !this.$v.email.required && errors.push('E-mail is required')
  57.         return errors
  58.       },
  59.     },
  61.     methods: {
  62.       submit () {
  63.         this.$v.$touch()
  64.       },
  65.       clear () {
  66.         this.$v.$reset()
  67.         this.name = ''
  68.         this.email = ''
  69.         this.select = null
  70.         this.checkbox = false
  71.       },
  72.     },
  73.   }
  74. </script>

Forms（表单） - 图6

Vee-validate

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

template script

  1. <template>
  2.   <ValidationObserver ref="observer" v-slot="{ validate, reset }">
  3.     <form>
  4.       <ValidationProvider v-slot="{ errors }" name="Name" rules="required|max:10">
  5.         <v-text-field
  6.           v-model="name"
  7.           :counter="10"
  8.           :error-messages="errors"
  9.           label="Name"
  10.           required
  11.         ></v-text-field>
  12.       </ValidationProvider>
  13.       <ValidationProvider v-slot="{ errors }" name="email" rules="required|email">
  14.         <v-text-field
  15.           v-model="email"
  16.           :error-messages="errors"
  17.           label="E-mail"
  18.           required
  19.         ></v-text-field>
  20.       </ValidationProvider>
  21.       <ValidationProvider v-slot="{ errors }" name="select" rules="required">
  22.         <v-select
  23.           v-model="select"
  24.           :items="items"
  25.           :error-messages="errors"
  26.           label="Select"
  27.           data-vv-name="select"
  28.           required
  29.         ></v-select>
  30.       </ValidationProvider>
  31.       <ValidationProvider v-slot="{ errors, valid }" rules="required" name="checkbox">
  32.         <v-checkbox
  33.           v-model="checkbox"
  34.           :error-messages="errors"
  35.           value="1"
  36.           label="Option"
  37.           type="checkbox"
  38.           required
  39.         ></v-checkbox>
  40.       </ValidationProvider>
  42.       <v-btn class="mr-4" @click="submit">submit</v-btn>
  43.       <v-btn @click="clear">clear</v-btn>
  44.     </form>
  45.   </ValidationObserver>
  46. </template>
  1. <script>
  2.   import { required, email, max } from 'vee-validate/dist/rules'
  3.   import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from 'vee-validate'
  5.   setInteractionMode('eager')
  7.   extend('required', {
  8.     ...required,
  9.     message: '{_field_} can not be empty',
  10.   })
  12.   extend('max', {
  13.     ...max,
  14.     message: '{_field_} may not be greater than {length} characters',
  15.   })
  17.   extend('email', {
  18.     ...email,
  19.     message: 'Email must be valid',
  20.   })
  22.   export default {
  23.     components: {
  24.       ValidationProvider,
  25.       ValidationObserver,
  26.     },
  27.     data: () => ({
  28.       name: '',
  29.       email: '',
  30.       select: null,
  31.       items: [
  32.         'Item 1',
  33.         'Item 2',
  34.         'Item 3',
  35.         'Item 4',
  36.       ],
  37.       checkbox: null,
  38.     }),
  40.     methods: {
  41.       submit () {
  42.         this.$refs.observer.validate()
  43.       },
  44.       clear () {
  45.         this.name = ''
  46.         this.email = ''
  47.         this.select = null
  48.         this.checkbox = null
  49.         this.$refs.observer.reset()
  50.       },
  51.     },
  52.   }
  53. </script>

Forms（表单） - 图7