官方文件

$v參數使用方法

安裝

npm install vuelidate --save

起手

在要使用的元件import，並掛載

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

創建驗證

需創建一個 validations 選項，裡面帶入要判斷的function，透過v-if判斷要顯示的提示

• 透過 $v 來取得設定的條件

<!-- 要使用v-model綁定 data值 -->
<template>
	<div>
		<input v-model="account">
		<span style="color:red" v-if="!$v.account.required">請輸入帳號</span>
	</div>
</template>

// vue元件中
// required 判斷欄位是否有輸入
import { required } from "vuelidate/lib/validators";

export default {
	data() {
		return {
			account: '',
		}
	},
	validations: {
		account: {
			required,
		}
	}
}

寫入自己的判斷function

可以創建一個 utils/rules.js 檔案，來存放需判斷的function

// utils/rules.js
// 判斷手機號碼正規
export const phoneNo = (value) => {
  return /^09[0-9]{8}$/.test(value);
};

<!-- vue元件中 -->
<template>
	<div>
		<inpute v-model="phone">
		<span v-if="$v.phone.phoneNo" style="color:red">請輸入正確手機格式</span>
	</div>
</template>

// vue元件中
import Vue from "vue";
import Vuelidate from "vuelidate";
import { required } from "vuelidate/lib/validators";
import { phoneNo } from "@/utils/rules";

Vue.use(Vuelidate);

export default {
  data() {
    return {
      phone: ""
    };
  },
  mounted() {},
  validations: {
    phone: {
      phoneNo
    }
  }
};