如何在Vue应用程序(使用Vuetify.js)中实现验证的简单表单? [英] How to implement a simple form with validation in a Vue app (with Vuetify.js)?
本文介绍了如何在Vue应用程序(使用Vuetify.js)中实现验证的简单表单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用Vuetify.js示例在使用Vue.js构建的网站上添加简单验证的联系表单。我是新手,所以我不确定它应该如何在Vue组件中实现。
I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.
我想要实现简单的客户端表单验证,并使用 https://getform.org/ 表单。
I want to achieve a simple client side form validation and make it work with a https://getform.org/ form.
更新:
(摘自Vuetify.js表格 example )
(taken from Vuetify.js form example)
<v-form v-model="valid">
<v-text-field
label="Name"
v-model="name"
:rules="nameRules"
:counter="10"
required
name="Name"
></v-text-field>
<v-text-field
label="E-mail"
v-model="email"
:rules="emailRules"
required
name="Email"
></v-text-field>
<v-btn
@click="submit"
:disabled="!valid"
>submit</v-btn>
</v-form>
<form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"></form>
脚本
Script
<script>
export default {
name: 'contact',
data () {
return {
snackbar: true,
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>
推荐答案
通过仅使用1个表单进行管理:
Managed to make it work by using just 1 form:
<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
script
<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>
别忘了:
到添加名称
属性。 Getform需要它们。
Don't forget:
To add name
attributes. Getform needs them.
这篇关于如何在Vue应用程序(使用Vuetify.js)中实现验证的简单表单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文