Question

我有一个表单，其中包含一些必填字段，问题是即使我没有填写这些字段，我也可以单击提交表单，

如何在所有必填字段都填写完毕之前禁用按钮？

一些领域：

 <v-flex xs12 sm5>
      <v-text-field v-model="FirstName"
                    label="First Name*"
                    :rules="requiredRules"
                    outline></v-text-field>
    </v-flex>
    <v-flex xs12 sm2>
      <v-text-field v-model="MiddleInitial"
                    label="Middle Initial"
                    maxLength="1"
                    outline></v-text-field>
    </v-flex>
    <v-flex xs12 sm5>
      <v-text-field v-model="LastName"
                    label="Last Name*"
                    :rules="requiredRules"
                    outline></v-text-field>
    </v-flex>

“提交”按钮

<v-btn v-on:click.prevent="post">Send Inquiry</v-btn>

我的脚本

 data() {
  return {
    maxState: 36,        
    select: null,
    form: {
      FirstName: "",
      MiddleInitial: "",
      LastName: "",
      SID: "",
      Email: "",
      PhoneNumber: "",
      Employer: "",
      Address: "",
      City: "",
      State: "",
      Zip: "",
      AboutUsID: "",
      ProgramID: "",
      YearQuarterID: "",
      Notes: ""
    }
  }
},
methods: {
  post: function () {
    this.$http.post('/api/inquiry/', {
      FirstName: this.FirstName,
      MiddleInitial: this.MiddleInitial,
      LastName: this.LastName,
      SID: this.SID,
      Email: this.Email,
      PhoneNumber: this.PhoneNumber,
      Employer: this.Employer,
      Address: this.Address,
      City: this.City,
      State: this.State,
      Zip: this.Zip,
      AboutUsID: this.AboutUsID,
      ProgramID: this.ProgramID,
      YearQuarterID: this.YearQuarterID,
      Notes: this.Notes,
    post:
      this.$router.push("/InquirySuccess")
    })
  }

有什么建议吗？

Answer 1

我的建议是使用像vuelidate之类的组件来验证您的表单。

审核：https://github.com/monterail/vuelidate

如果您想开发自己的验证方法，则可能会重新发明轮子。您可以使用具有许多功能且经过良好测试的解决方案。

禁用“提交”按钮，直到填写必填字段-Vuetify，VueJs

1 个答案: