Vuetify內置的表單校驗規則

時間 2021-01-02

標籤 vue npm api 網絡 app 框架 less ide this 欄目 HTML 简体版

原文原文鏈接

本文中咱們以Vuetify中的v-text-field組件爲例總結Vuetify內置的表單校驗規則支持。vue

要點

要向字段添加驗證，咱們必須作兩件事：npm

將字段設爲必填字段
爲字段建立驗證規則

參考下面的例子：api

required是HTML5新引入的一個屬性，required 屬性規定必需在表單提交以前填寫輸入字段。
若是使用該屬性，則字段是必填（或必選）的。
【註釋】required 屬性適用於如下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。網絡

解析

Vuetify官方僅僅簡單地給出v-text-field組件中屬性(Prop) rules的基本介紹，以下圖，並無給出詳細的使用舉例：
app

結合網絡上已有使用經驗，能夠得出的結論是：對於少許基本的表單組件的規則校驗可使用上面的required屬性及這裏的Vuetify組件中專有的rules屬性實現支持。事實上，第一個圖中已經給出了使用格式。框架

上面使用的校驗規則以下：less

基礎型舉例

對於上面例子的更復雜實用一點的版本以下：ide

而後，在data中定義以下規則：ui

v-form校驗與提交操做

v-form組件提供了三個功能與校驗操做相關，咱們能夠經過在組件上設置ref來訪問它們。例如，<v-form ref="form">。this

this.$refs.form.validate() ：將校驗全部輸入並返回它們是否都有效。
this.$refs.form.reset()：將清除全部輸入並重置校驗錯誤。
this.$refs.form.resetValidation()：只是重置輸入校驗，而不會更改其狀態。

舉例

<template>
  <v-form
    ref="form"
    v-model="valid"
    lazy-validation
  >
    <v-text-field
      v-model="name"
      :counter="10"
      :rules="nameRules"
      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"
      color="success"
      class="mr-4"
      @click="validate"
    >
      Validate
    </v-btn>

    <v-btn
      color="error"
      class="mr-4"
      @click="reset"
    >
      Reset Form
    </v-btn>

    <v-btn
      color="warning"
      @click="resetValidation"
    >
      Reset Validation
    </v-btn>
  </v-form>
</template>
<script>
  export default {
    data: () => ({
      valid: true,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
      ],
      select: null,
      items: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4',
      ],
      checkbox: false,
    }),

    methods: {
      validate () {
        this.$refs.form.validate()
      },
      reset () {
        this.$refs.form.reset()
      },
      resetValidation () {
        this.$refs.form.resetValidation()
      },
    },
  }
</script>