Vuetify 自定义表单验证显示错误 _this.$refs[f].validate 不是函数答案

【问题标题】：Custom form Validation by Vuetify Showing Error _this.$refs[f].validate is not a functionVuetify 自定义表单验证显示错误 _this.$refs[f].validate 不是函数
【发布时间】：2021-09-13 09:27:54
【问题描述】：

我想使用 Vuetify 进行自定义验证。我的 Vuetify 版本是 1.11.3。这是我的模板。我根据this documentation给v-card设置了一个ref。

    <v-card ref="form">
        <v-card-text>
          <v-text-field
            ref="name"
            v-model="name"
            label="Full Name:"
            :rules="[() => !!name || 'Name is required']"
            :error-messages="errorMessages"
            required
            light
          >
          </v-text-field>
          <v-text-field
            ref="email"
            v-model="email"
            label="Email Address:"
            :rules="[
              () => !!email || 'Email is required',
              () => (!!email && /.+@.+/.test(email)) || 'Email must be valid',
            ]"
            required
            light
          ></v-text-field>

          <VuePhoneNumberInput
            ref="phone"
            v-model="phone"
            color="black"
            dark-color="white"
            size="lg"
            default-country-code="BD"
            light
            required
          />
          <v-textarea
            ref="msg"
            v-model="msg"
            label="Message"
            :rules="[() => !!msg || 'Message is required']"
            light
          ></v-textarea>

        </v-card-text>
        <v-card-actions>
          <v-btn @click="sendForm"> Submit </v-btn>
        </v-card-actions>
    </v-card>

我正在尝试使用它们的引用来验证表单和文本字段。这是我的代码：

 data() {
    return {
      name: null,
      email: null,
      phone: null,
      msg: null,
      submitStatus: null,
      formHasErrors: false,
      errorMessages: '',
    }
  },
  computed: {
    form() {
      return {
        name: this.name,
        email: this.email,
        phone: this.phone,
        msg: this.msg,
      }
    },
  },
  watch: {
    name() {
      this.errorMessages = ''
    },
  },
  methods: {
    sendForm() {
      this.formHasErrors = false

      Object.keys(this.form).forEach((f) => {
        if (!this.form[f]) this.formHasErrors = true
        this.$refs[f].validate(true)
      })
}

当我提交按钮时，它会显示

client.js?06a0:103 TypeError: _this.$refs[f].validate is not a 功能

我收到以下错误。这有什么问题？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我会在这里重新开始使用V-form 而不是 v-card。

然后您可以使用返回 boolean

的函数this.$ref.myForm.validate() 检查您的表单是否有效

这是一个小例子：

  <v-card>
    <v-card-text>
      <v-form ref="myForm">
        <v-row>
          <v-col
            cols="12"
            sm="7"
          >
            <v-text-field
              prepend-icon="mdi-tag-text"
              v-model="form.name"
              :rules="[
                 (v) => !!v || 'Name is requierd',
              ]"
              label="Name"
            />
          </v-col>
        </v-row>
      </v-form>
    </v-card-text>
    <v-card-actions>
      <v-btn
        @click="check"
      >
        Check
      </v-btn>
    </v-card-actions>
  </v-card>

还有脚本：

export default {
  data: () => ({
    form:{
      name : ""
    },
  }),
  
  methods:{
    check(){
      if (this.$refs.myForm.validate()){
        //form is valid
      } else {
        //form is not valid
      }
    }
  }
  
}

【讨论】：