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

【问题标题】：Validate vuetify textfield only on submit仅在提交时验证 vuetify 文本字段
【发布时间】：2019-12-24 03:02:10
【问题描述】：

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 文本字段中做到这一点？

【问题讨论】：

你使用什么版本的 Vuetify？
@Javas "vue": "^2.5.2", "vue-router": "^3.0.1", "vuetify": "^1.5.16"
恕我直言，仅在提交时验证可用性会很差。您的目标是在用户仍在键入时不显示错误吗？在这种情况下，您还可以延迟规则执行，直到几百毫秒内没有输入事件。

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

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

    }
  }
})

【讨论】：

如果从form 属性触发提交。它在第一次不起作用。在您的代码中，您从v-btn 触发。你能试试我给的代码吗
@vinieth 检查更新的答案，这是您需要的吗？
现在它工作得很好，在这个post 中，btn 不在表单中。但就我而言，btn 在里面。为什么它不起作用。任何原因。
@vinieth 如果我们从中删除 id 并从属性中删除 from 也确实有效。我刚刚添加了setTimeout 以便得到反映
@Subhash 为什么会这样（需要时间来更新规则）。任何原因。

【解决方案2】：

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

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

【讨论】：

在提交表单后重置所有字段时也很有用，它不会触发“必填”规则
正是我想要的。

【解决方案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 上有一个称为惰性验证的道具，您可以在文档中看到：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.
  }
},

【讨论】：