Vuetify内置的表單校驗規則

本文中我們以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-form ref="form">。

• 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>           

值得推薦的Vue校驗方案：vee-validate

根據本人搜尋分析，經過大浪淘沙式篩選後，目前移居首位的Vue庫擴充校驗方案非vee-validate莫屬。而且，這個庫是一套完整的基于模闆的Vue校驗架構，提供了全面的支援網頁，并且它緊跟Vue的下一個版本，非常有必要在企業開發中作詳細研究使用。

還有一個輕量級的表單級的校驗庫是https://vuelidate.netlify.com/ Vuelidate，有興趣有讀者可以研究。

參考

https://vuetifyjs.com/en/api/v-text-field/#props