仅在提交时验证 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 文本字段中做到这一点？

原文由 vinieth 发布，翻译遵循 CC BY-SA 4.0 许可协议

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')
        }
      })

    }
  }
})

原文由 Subash 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 dotNET 发布，翻译遵循 CC BY-SA 4.0 许可协议