使用vee-validate执行Require和Regex

<template>
  <form @submit="submitForm">
    <div>
      <label for="name">姓名：</label>
      <input id="name" v-model="name" v-validate="'required'" :class="{'is-invalid': errors.has('name')}">
      <span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input id="email" v-model="email" v-validate="'required|regex:^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'" :class="{'is-invalid': errors.has('email')}">
      <span v-show="errors.has('email')" class="error">{{ errors.first('email') }}</span>
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import { required, regex } from 'vee-validate/dist/rules';

extend('required', required);
extend('regex', regex);

export default {
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      this.$validator.validateAll().then(result => {
        if (result) {
          // 表单验证通过，执行提交操作
          // ...
        }
      });
    }
  }
};
</script>