使用Vuelidate与Bootstrap Vue时，模态框表单验证重置异常问题

嘿，这个坑我之前踩过！问题出在你只清空了表单字段，但Vuelidate的验证状态（比如$dirty、$error这些标记）还没被重置——所以再次打开模态框时，这些旧的状态还在，导致错误提示依然显示。下面是具体的解决方法：

核心思路：模态框关闭时同步重置验证状态 #

Bootstrap Vue的模态框提供了@hidden事件（模态框完全关闭后触发），我们可以利用这个事件，在模态框关闭时同时完成两个操作：清空表单数据 + 重置Vuelidate的验证状态。

具体实现步骤 #

1. 确保组件中已正确引入Vuelidate
   你的组件应该已经注入了$v对象，并且定义了对应的验证规则，这一步就不多赘述了。

2. 绑定模态框的@hidden事件
   给你的<b-modal>添加@hidden="resetModal"属性，示例代码如下：

   <b-modal id="form-modal" @hidden="resetModal">
     <b-form>
       <!-- 表单字段示例 -->
       <b-form-input 
         v-model="formData.username"
         :state="$v.formData.username.$dirty ? !$v.formData.username.$error : null"
         placeholder="请输入用户名"
       />
       <div class="text-danger" v-if="$v.formData.username.$dirty && $v.formData.username.$error">
         用户名不能为空
       </div>
   
       <!-- 按钮组 -->
       <b-button type="submit" @click="handleSubmit">提交</b-button>
       <b-button @click="$bvModal.hide('form-modal')">取消</b-button>
     </b-form>
   </b-modal>
   

3. 编写重置方法
   在组件的methods中，实现resetModal方法，同时清空表单和重置验证状态：

   methods: {
     resetModal() {
       // 1. 清空表单数据，恢复初始状态
       this.formData = {
         username: ''
         // 其他字段同理
       };
       // 2. 重置Vuelidate的验证状态，清除所有$dirty、$error标记
       this.$v.$reset();
     },
     handleSubmit() {
       // 提交前先触发表单验证
       this.$v.$touch();
       if (!this.$v.$invalid) {
         // 这里写你的提交逻辑
         this.$bvModal.hide('form-modal');
       }
     }
   }
   

为什么用@hidden而不是取消按钮的点击事件？ #

因为用户关闭模态框的方式不止点击取消按钮——比如点击模态框外部区域、按ESC键，这些操作都不会触发取消按钮的点击事件，但都会触发@hidden事件。用@hidden能确保所有关闭模态框的场景都能正确重置验证状态，避免遗漏。

额外提示：编辑场景的适配 #

如果这个模态框是用来编辑数据的（打开时会填充已有数据），记得在打开模态框并填充数据后，也调用一次this.$v.$reset()——这样初始填充的数据不会触发验证错误，只有当用户修改字段后，才会触发验证逻辑。

内容的提问来源于stack exchange，提问作者Iago Mello