# W_VeeValidate 筆記
簡單來說他是一個 Vue 驗證函式庫，結合表單系統，不須要寫它娘的正規。透過簡單的規則來輕鬆建立表單驗證

Flied 用來取代 input tag
其特色是自動驗證，不用寫V-model等等

//簡單範例
<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'

//這裡設定規則
const schema = yup.object({
  email: yup.string().required().email(),
  name: yup.string().required(),
  password: yup.string().required().min(8),
})
</script>

<template>
  <Form class="one" @submit="submit" :validation-schema="schema">
    <div class="one__one">
      <Field name="email" />
      <ErrorMessage name="email" />
    </div>
    <div class="one__two">
      <Field class="test" name="password" type="password" />
      <ErrorMessage name="password" />
    </div>
    <div class="one__three">
      <button>Submit</button>
    </div>
  </Form>
</template>

<style scoped>
.one {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 測試調整大小 */
.test {
  width: 10px;
  height: 20px;
}
</style>