Javascript 如何在Vue应用程序（使用Vuetify.js）中实现带有验证的简单表单？

我正在尝试使用Vuetify.js示例在使用Vue.js构建的网站上添加一个带有简单验证的联系人表单。我是个新手，所以我不确定它应该如何在Vue组件中实现

---

我想实现一个简单的客户端表单验证，并使其与表单一起工作

---

更新：

代码| Contact.vue （摘自Vuetify.js表单）

提交

剧本

导出默认值{
姓名：'联系人'，
数据（）{
返回{
snackbar：没错，
有效：假，
名称：“”，
姓名规则：[
（v） =>！！v | |“需要名称”，
（v） =>v.length！！v | |“需要电子邮件”，
（v） =>/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+*（\.\w{2,3}）+$/。测试（v）| |“电子邮件必须有效”
]
}
},
方法：{
提交（）{
nativeForm.submit（）
}
}
}

只需使用一个表单即可实现：

提交

剧本

导出默认值{
姓名：'联系人'，
数据（）{
返回{
有效：假，
名称：“”，
姓名规则：[
（v） =>！！v | |“需要名称”，
（v） =>v.length！！v | |“需要电子邮件”，
（v） =>/^\w+（[\.-]？\w+*@\w+（[\.-]？\w+*（\.\w{2,3}）+$/。测试（v）| |“电子邮件必须有效”
]
}
},
方法：{
提交（）{
nativeForm.submit（）
}
}
}

别忘了： 添加

name

属性。Getform需要它们。

const-app=新的Vue({
el:“#应用程序”，
数据：{
错误：[]，
名称：空，
年龄：空，
电影：空
},
方法：{
检查表：功能（e）{
如果（this.name&&this.age）返回true；
this.errors=[]；
如果（！this.name）this.errors.push（“需要名称”）；
如果（！this.age）this.errors.push（“年龄要求”）；
e、 预防默认值（）；
}
}
})

输入，选择{
左边距：10px；
}

请更正以下错误：

{{error}



名称


年龄


最喜欢的电影
星球大战
香草天空
原子金发女郎

看来你没有

http://localhost:8080/api/submit

路线？你需要服务器端路线。我猜您的端口

8080

用于客户端（即vuejs），因此您需要服务器端路由来生成表单submit@Traxo是的，但是，我必须创建它才能使表单工作吗？或者它并没有那么简单？对于表单验证，您不需要路由，但对于提交数据，您可能需要路由。请参阅基本示例，其中表单在客户端验证而不提交@Traxo谢谢，我看到了这个示例，但我不明白这正是我需要的（更新的问题）。但是现在我从getFormAPI（问题中更新的代码）中得到

消息：null，电子邮件：null

。如果您知道如何将数据传递到第二个表单，这样它就不会发出

null

请发布答案我会接受它我已经设法让它工作了（请参阅其他答案），但我会为您的问题分配奖励，并使用非Vuetify.js特定的通用Vue方法。谢谢

<v-form method="post" action="https://www.getform.org/f/[YOUR-FORM-ID]" id="nativeForm" v-model="valid">

      <v-text-field
        label="Name"
        v-model="name"
        :rules="nameRules"
        :counter="10"
        required
        name="message"
      ></v-text-field>
      <v-text-field
        label="E-mail"
        v-model="email"
        :rules="emailRules"
        required
        name="mail"
      ></v-text-field>

      <v-btn @click="submit" :disabled="!valid">submit</v-btn>
 </v-form>

 <script>
    export default {
      name: 'contact',

      data () {
         return { 
            valid: false,
            name: '',
            nameRules: [
              (v) => !!v || 'Name is required',
              (v) => v.length <= 10 || 'Name must be less than 10 characters'
            ],
            email: '',
            emailRules: [
              (v) => !!v || 'E-mail is required',
              (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
            ]
          }
        },
        methods: {
          submit() {
            nativeForm.submit()
          }
        }
      }
  </script>