Vuetify 表单验证：在没有指示的情况下返回“False”

Posted 2023-02-22

【中文标题】Vuetify 表单验证：在没有指示的情况下返回“False”

【英文标题】：Vuetify Form Validation: Returns "False" Without Indication

【发布时间】：2022-01-23 01:07:49

【问题描述】：

我有一个要验证的 vuetify 表单，但它总是返回 false。我为多个输入设置了规则，并且希望在规则失败时看到警告（或类似的东西），但我没有得到它失败的原因。

<template>
<v-dialog class="FormContainer" v-model='open' max- @click:outside="CloseForm">
  <v-container  style="background-color:#f6f6f6 !important; box-shadow: 0px 10px 10px #00000029;
border: 4px solid #dbdbdb;
border-radius: 20px;">
    <div class="personaClose"><v-icon x-large @click="ChangeDisplay">mdi-close</v-icon></div>
    <v-form v-if="!DisplayForm" ref="form" lazy-validation>
      <div class="TitleText">Submit a Program to Creators Connect</div>
      <div class="SubtitleText">
        Creators Connect is an online resource hub that helps future creators
        across the U.S. identify pathways into the manufacturing industry. If
        you work with or are aware of a program that we should include, please
        submit the information on the form below. If you would like to submit
        multiple programs, please submit a new form for each one.
      </div>
      <div class="HrBar" style="margin-bottom:0px !important" />
      <div class="InputGroup InputHeight">
        Program Name*
        <v-text-field
          v-model="FormResults['ProgramName']"
          outlined
          rounded
          :rules="[(v) => !!v || 'Program name is required']"
          required
          placeholder="E.g., Automotive Technology Program"
        />
      </div>
      <div class="InputGroup InputHeight">
        Company/Organization*
        <v-text-field
          v-model="FormResults['LocationName']"
          outlined
          rounded
          :rules="[(v) => !!v || 'Company/Organization is required']"
          required
          placeholder="E.g., Midlands Technical College"
        />
      </div>
<v-btn plain class='yellowButton' id='ResourceBtn' @click="SubmitForm()">Submit</v-btn>     
    </v-form>
  </v-container>
</v-dialog>
</template>

有几个输入，都围绕与这些相同的样式设计。其中一些是精选。我的开发工具控制台中没有任何问题。

<script>
export default 
    data: () => (
        open:true,
        DisplayForm: false,
        ResourceTypeBtn: ["Reccomend a resource", "I am a member of a company"],
        FormResults: 
            Submitter: 
                Name: "",
                Email: null,
            ,
            ProgramName: "",
            LocationName: "",
            ProgramDescription: "",
            ProgramWebsite: null,
            ProgramType: 
                Define: "",
                Location: [ location: "" ],
                Cost: "",
                Length: "",
                PreReqs: "",
            ,
            ContactDetails: 
                Name: "",
                Phone: "",
                Email: "",
            ,
        ,
),
methods: 
        SubmitForm() 
      this.$refs.form.validate();
      // console.log(this.$refs.form.validate())
      console.log(this.FormResults);
            if(this.$refs.form.validate())
                this.$emit("submittion");
        console.log(this.FormResults);
                this.DisplayForm = !this.DisplayForm;
            
            // this.DisplayForm = this.$refs.form.validate();
        

</script>

表单应该检查它是否有效，如果有效，则移动到另一个屏幕。

【参考方案1】：

您的v-form 中似乎缺少v-model。 v-model 值指示表单是否存在验证错误。

在 codepen 中查看此示例： https://codepen.io/cmfc31/pen/eYGErXJ?editors=101