仅在提交时验证 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

如果您像我一样，只是想阻止在每次击键时运行验证，请validate-on-blur在文本字段上应用 prop，现在只有在用户完成输入整个输入后才会执行验证。

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

2024 年更新

Vuetify 3 引入了validate-on接受多个值的属性，其中包括blur，因此 Vuetify 3 用户的正确语法是validate-on="blur". 谢谢@epeleg。

Answer 2

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

最初，规则应该是一个空数组，当您单击按钮时，您可以根据需要动态添加/删除规则，就像在 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')
        }  
      })

    }
  }
})