vee-validate 3.x 使用指南

yarn add vee-validate@3.4.5

文件：
Form.Vue
validation.js

参考文档：
Vee Validate Doc
vue components slots#作用域插槽

Form.Vue

<template>
  <ValidationObserver
    v-slot="{ invalid, handleSubmit }"
    ref="form"
    tag="div"
    class="my-5 row justify-content-center"
  >
    <form class="col-md-6" @submit.prevent="handleSubmit(sendOrder)">
      <ValidationProvider
        immediate
        name="Email"
        rules="required|email"
        v-slot="{ errors, classes }"
        tag="div"
        class="form-group"
      >
        <label for="useremail">Email</label>
        <input
          type="email"
          class="form-control"
          name="email"
          id="useremail"
          v-model="form.user.email"
          placeholder="請輸入 Email"
          :class="classes"
        />
        <span class="invalid-feedback">{{ errors[0] }}</span>
      </ValidationProvider>

      <div class="text-right mt-2">
        <button class="btn btn-danger" :disabled="invalid">送出訂單</button>
      </div>
    </form>
  </ValidationObserver>
</template>

<script>
import { ValidationObserver, ValidationProvider } from 'vee-validate';
import './validation';

export default {
  name: 'Form',
  data() {
    return {
      form: {
        user: {
          email: '',
        },
      },
    };
  },
  methods: {
    sendOrder() {
      // this.$refs.form.validate().then(success => {
      //   if (!success) {
      //     return;
      //   }

      //   alert('Form has been submitted!');

      //   // Resetting Values
      //   this.firstName = this.lastName = this.email = '';

      //   // Wait until the models are updated in the UI
      //   this.$nextTick(() => {
      //     this.$refs.form.reset();
      //   });
      // });

      this.$emit('onSendOrder', this.form);
      this.resetForm();
    },
    resetForm() {
      this.form = {
        user: {
          email: '',
          name: '',
          tel: '',
          address: '',
        },
        message: '',
      };
    },
  },
  components: {
    ValidationObserver,
    ValidationProvider,
  },
};
</script>

validation.js

import { extend, configure, localize } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';

extend('required', required);

extend('email', email);

extend('mobile', {
  validate: (value) => /^1[3-9]\d{9}$/.test(value),
  message: '{_field_}格式错误',
});

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
  },
});

localize('zh_CN', zh_CN);