跳到主要内容

Vee-Validate

簡介​

在輸入資料時，提供以下三項功能：

  1. provider 驗證規則
  2. provider 前端條件顯示(class)搭配 v-slot
  3. observer 對整個表格監控，搭配 v-slot對驗證結果處理。
備註

v-slot 稱為插槽（Vue 的元件語法之一），可以將驗證結果的回饋資料直接帶入於區塊中，相關概念可參考： https://cn.vuejs.org/v2/guide/components-slots.html#作用域插槽

以下用 vue2 說明

驗證​

<template>
  <validation-provider rules="required|phoneCheck" v-slot="{ classes,errors }">
    <div class="veeCheck">
        <input id="buyerPhone" v-model.trim="buyerPhone" placeholder="請輸入手機號碼"  data-layout="normal" :class="classes">
        <span :class="classes">{{ errors[0] }}</span>
      </div>
  </validation-provider>
</template>

本身提供一些 rule 可供使用

<script>
import { required, email } from 'vee-validate/dist/rules'
extend('required', {
  ...required,
  message: '欄位資料為必填'
})
extend('email', {
  ...email,
  message: 'email格式錯誤'
})
</script>

自訂rule

<script>
extend('phoneCheck', value => {
  const phoneRegexp = /^09[0-9]{8}$/
  // return phoneRegexp.test(value)
  if (phoneRegexp.test(value)) {
    return true
  }
  return '手機號碼格式錯誤'
})
</script>

條件顯示​

前端條件顯示，搭配 v-slot，切換 classname 先把元件框起來，通常是 input,span

<template>
  <validation-provider rules="required|phoneCheck" v-slot="{ classes,errors }">
    <div class="veeCheck">
        <input id="buyerPhone" v-model.trim="buyerPhone" placeholder="請輸入手機號碼"  data-layout="normal" :class="classes">
        <span :class="classes">{{ errors[0] }}</span>
      </div>
  </validation-provider>
</template>

可使用 configure 改變 vee-validate的預設 classname（可選 for Bootstrap）

import { configure } from 'vee-validate';

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
    dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
    // ...
  }
})

###Validation Flags 驗證標誌

定義驗證“通過“及“不通過“的樣式

.veeCheck{
  width: 100%;
  span {
    display: block;
  }
  span.invalid {
    color: #eb0600;
  }
  span.valid {
    color: #000;
  }
  input.invalid {
    color: #eb0600;
    border: 1px #eb0600 solid;
  }
  input.valid {
    color: #000;
    border-color: #000;
  }
}

全表驗證​

以下使用 'invalid' 判斷

Name: invalid.

Type: boolean.

Description: True if at least one field is invalid.

<validation-observer  v-slot="{ invalid }">
  <validation-provider rules="required|phoneCheck" v-slot="{ classes,errors }">
    <div class="veeCheck">
        <input id="buyerPhone" v-model.trim="buyerPhone" placeholder="請輸入手機號碼"  data-layout="normal" :class="classes">
        <span :class="classes">{{ errors[0] }}</span>
    </div>
  </validation-provider>
  <validation-provider rules="required|email" v-slot="{ classes,errors }">
    <div class="veeCheck">
      <input id="buyerEmail" v-model.trim="buyerEmail" type="email" placeholder="請輸入Email"  data-layout="normal" :class="classes">
        <span :class="classes">{{ errors[0] }}</span>
    </div>
  </validation-provider>
  <div class="confirmBtn-container">
    <el-button class="confirmBtn" :class="{disabled: invalid}" :disabled="invalid" @click="doConfirm()">
      <img src="../../../../../assets/image/success_gray.png" v-if="invalid">
      <img src="../../../../../assets/image/success_black.png" v-else>
      <span>確定</span>
    </el-button>
  </div>
</validation-observer>

參考資料​