重置 Vuetify 表单验证

Posted 2023-02-16

【中文标题】重置 Vuetify 表单验证

【英文标题】：Reset Vuetify form validation

【发布时间】：2018-12-06 03:35:58

【问题描述】：

我在 v-dialog 中重置 vuetify 验证时遇到问题。

这个 codepen 是我所拥有的简化版。https://codepen.io/yuukive/pen/BVqpEZ

使用上面的代码，如果我这样做了

（打开对话框-->按保存按钮-->（验证失败）-->按关闭按钮-->再次打开对话框），

当我再次打开对话框时它已经被验证...

是否可以在用户第二次打开之前重置验证？

new Vue(
  el: '#app',
  data: () => (
    dialog: false,
    emailRules: [v => !!v || 'Name is required']
  ),
  methods: 
    onSave() 
      if (!this.$refs.form.validate()) return
      dialog = false
    
  
)

<div id="app">
  <v-app id="inspire">
    <v-layout row justify-center>
      <v-dialog v-model="dialog" persistent max->
        <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">Email</span>
          </v-card-title>
          <v-form ref="form">
            <v-card-text>
              <v-container grid-list-md>
                <v-layout wrap>
                  <v-flex xs12>
                    <v-text-field label="Email" required :rules="emailRules"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>
              <small>*indicates required field</small>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click.native="dialog = false">Close</v-btn>
              <v-btn color="blue darken-1" flat @click.native="onSave">Save</v-btn>
            </v-card-actions>
          </v-form>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-app>
</div>

【参考方案1】：

this.$refs.form.reset() 可能适用于javascript，但TypeScript 的编译器会抱怨打字。即使在serve 期间，您只能在终端中看到错误而不会破坏应用程序，但当您尝试build 应用程序时，它实际上会崩溃。

创建一个新变量并将any 类型赋值给它就可以了，下面是一个示例：

const refForm: any = this.$refs.form;
refForm.reset();

【讨论】：

我相信这也会做你想要的：(this.$refs.form as htmlFormElement).resetValidation()

【参考方案2】：

resetValidation() 只会清除验证错误，reset() 也会清除输入字段。

【参考方案3】：

来自文档的Example 使用：

this.$refs.form.reset()

请注意，虽然reset() 会清除验证，但它也会清除输入。 您可以关注this issue 以查看更多更新。

所以你也许可以观察对话框值并重置表单：

watch: 
    dialog() 
        this.$refs.form.reset()
    

【讨论】：

如果我有其他表单可以使用重启或验证，例如：this.$refs.formNew.reset()