bootstrap modal VeeValidate

可以通过以下步骤在 Bootstrap Modal 中使用 VeeValidate 进行表单验证：

1. 首先，在您的项目中安装 VeeValidate 和 Bootstrap 依赖项：

   npm install vee-validate bootstrap

2. 在您的 Vue 组件中引入所需的依赖项：

   import Vue from 'vue'
   import BootstrapVue from 'bootstrap-vue'
   import VeeValidate from 'vee-validate'
   
   Vue.use(BootstrapVue)
   Vue.use(VeeValidate)

3. 在您的模板中，使用 Bootstrap Modal 的基本结构：

   <b-modal id="my-modal" title="My Modal">
     <form>
       <div class="form-group">
         <label for="username">Username</label>
         <input type="text" class="form-control" v-model="username" v-validate="'required'">
         <span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
       </div>
       <div class="form-group">
         <label for="password">Password</label>
         <input type="password" class="form-control" v-model="password" v-validate="'required'">
         <span v-show="errors.has('password')" class="help is-danger">{{ errors.first('password') }}</span>
       </div>
     </form>
   </b-modal>

注意，我们在每个表单输入上使用了 `v-validate` 指令来定义要验证的规则，并在每个错误消息上使用了 `v-show` 指令来指示何时显示该消息。

4. 在您的 Vue 组件中，编写打开和提交表单的方法：

   export default {
     data() {
       return {
         username: '',
         password: '',
       }
     },
     methods: {
       openModal() {
         this.$refs.modal.show()
       },
       submitForm() {
         this.$validator.validateAll().then(result => {
           if (result) {
             // 表单验证通过，提交表单数据
           }
         })
       },
     },
   }

在这里，我们使用了 `$refs` 来访问 Modal 组件，并在打开表单时调用 `show()` 方法。在提交表单时，我们使用 `$validator.validateAll()` 方法来执行所有表单输入的验证，并根据结果采取适当的措施。

5. 最后，在您的模板中，使用按钮来触发打开和提交表单的方法：

   <div>
     <b-button @click="openModal">Open Modal</b-button>
   </div>
   
   <template #modal-footer>
     <div>
       <b-button variant="primary" @click="submitForm">Submit</b-button>
     </div>
   </template>

在这里，我们使用了 `@click` 事件将按钮与打开和提交表单的方法相关联，并使用 `#modal-footer` 插槽来放置提交按钮。

现在，您已经可以在 Bootstrap Modal 中使用 VeeValidate 进行表单验证了！