仅在提交时验证 vuetify 文本字段

Question

temp.vue

<v-form ref="entryForm" @submit.prevent="save">
  <v-text-field label="Amount" :rules="numberRule"r></v-text-field>
  <v-btn type="submit">Save</v-btn>
</v-form>

<script>
export default {

   data: () => ({
     numberRule: [
       v => !!v || 'Field is required',
       v => /^\d+$/.test(v) || 'Must be a number',
     ],
   }),

   methods: save () {
     if (this.$refs.entryForm.validate()){
       //other codes
     }
   }
}
</script>

这里发生的情况是，在文本字段本身中输入内容时，规则就会被执行。我只想在提交时执行规则。如何在 vuetify 文本字段中做到这一点？

Answer 1

Vuetify

rules

当输入获取值时执行， 但是，如果您希望仅在表单提交上发生这种情况，则您已经重新修改了绑定到该输入的规则，

最初，规则应该是一个空数组，当您单击按钮时，您可以根据需要动态添加/删除规则，就像在 codepen 中一样

密码笔

<div id="app">
  <v-app id="inspire">
    <v-form ref="entryForm" @submit.prevent="submitHandler">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="user.number"
              :rules="numberRules"
              label="Number"
              required
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row>
          <v-btn type="submit" color="success">Submit</v-btn>
          </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid: false,
    firstname: '',
    user: {
      number: ''
    },
    numberRules: []
  }),
  watch: {
    'user.number' (val) {
      this.numberRules = []
    }
  },
  methods: {
    submitHandler () {
      this.numberRules = [
        v => !!v || 'Field is required',
        v => /^\d+$/.test(v) || 'Must be a number',
      ]
      let self = this
      setTimeout(function () {
        if (self.$refs.entryForm.validate()){
         //other codes
          alert('submitted')
        }  
      })

    }
  }
})

Answer 2

如果您像我一样，只是想阻止在每次击键时运行验证，请在文本字段上应用

validate-on-blur

属性，现在只有在用户完成输入整个输入后才会执行验证。

所以这不是OP的确切答案，但我认为这是我们大多数人想要实现的目标。该道具已记录在here。

2024 年更新

Vuetify 3 引入了

validate-on

属性，该属性接受包括

blur

在内的多个值，因此 Vuetify 3 用户的正确语法是

validate-on="blur"

。谢谢@epeleg。

Answer 3

我有另一种方法可以在不设置观察者的情况下解决这个问题：

<v-form lazy-validation v-model="valid" ref="form">
  <v-text-field
   class="w-100"
   light
   label="Nome"
   v-model="form.nome"
   :rules="[rules.required]"
   rounded
   required
   outlined
   hide-details="auto"
  ></v-text-field>
  <v-btn
   rounded
   height="50"
   width="200"
   :disabled="!valid"
   :loading="isLoading"
   class="bg-btn-secondary-gradient text-h6 white--text"
   @click="submitContactForm()"
  >
   Enviar
  </v-btn>
</v-form>

vuetify 上有一个名为“lazy-validation”的道具，您可以在文档中看到：https://vuetifyjs.com/en/api/v-form/#functions

因此，v-form 有一个可以通过 $refs 查看的方法，称为 validate()，它可以根据您的表单规则返回 true 或 false。

并且，在提交时触发验证的函数将如下所示：

submitContactForm() {
  const isValid = this.$refs.form.validate();
  if (isValid) {
    alert("Obrigado pelo contato, sua mensagem foi enviada com sucesso!");
    this.form = {
      nome: "",
      celular: "",
      email: "",
      mensagem: ""
    };
    this.$refs.form.resetValidation(); // Note that v-form also has another function called resetValidation(), so after we empty our fields, it won't show the validation errors again.
  }
},