Creëer een Vue.js formulier met validatie en foutafhandeling
description
Met deze prompt creëer je een gebruiksvriendelijk en betrouwbaar formulier in Vue.js, waardoor je fouten bij gebruikersinvoer minimaliseert en de algehele kwaliteit van je frontend applicatie verbetert. Het bespaart tijd door kant-en-klare validatiepatronen te bieden en verbetert de gebruikerservaring ten opzichte van standaardformulieren zonder validatie.
prompt
Help me een Vue.js formuliercomponent te maken met veldvalidatie en foutafhandeling. Formulier type: <voer het type formulier in, bijvoorbeeld registratie of contact> Validat ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een eenvoudig Vue.js formuliercomponent voor registratie met veldvalidatie en foutafhandeling:
```vue
<template>
<form @submit.prevent="submitForm">
<div>
<label for="naam">Naam:</label>
<input
type="text"
id="naam"
v-model="naam"
@blur="validateNaam"
/>
<span v-if="fouten.naam" class="foutmelding">{{ fouten.naam }}</span>
</div>
<div>
<label for="email">Email:</label>
<input
type="email"
id="email"
v-model="email"
@blur="validateEmail"
/>
<span v-if="fouten.email" class="foutmelding">{{ fouten.email }}</span>
</div>
<button type="submit">Registreren</button>
</form>
</template>
<script>
export default {
data() {
return {
naam: '',
email: '',
fouten: {
naam: '',
email: ''
}
};
},
methods: {
validateNaam() {
if (!this.naam.trim()) {
this.fouten.naam = 'Naam is verplicht.';
} else {
this.fouten.naam = '';
}
},
validateEmail() {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!this.email.trim()) {
this.fouten.email = 'Email is verplicht.';
} else if (!emailPattern.test(this.email)) {
this.fouten.email = 'Email is ongeldig.';
} else {
this.fouten.email = '';
}
},
submitForm() {
// Voer validatie uit voordat je verstuurt
this.validateNaam();
this.validateEmail();
// Als er geen fouten zijn, verstuur het formulier
if (!this.fouten.naam && !this.fouten.email) {
alert('Formulier succesvol verzonden!');
// Hier kun je de verzendlogica toevoegen
}
}
}
};
</script>
<style>
.foutmelding {
color: red;
font-size: 0.9em;
}
</style>
```
**Wat doet deze code?**
- Het formulier bevat twee velden: naam en email.
- Bij het verlaten van een veld (blur) wordt de validatie uitgevoerd.
- Bij het indienen van het formulier wordt eerst alle validaties gecontroleerd.
- Foutmeldingen worden onder de velden getoond als er validatiefouten zijn.
- De email wordt gecontroleerd op verplichte invoer en geldigheid met een regex.
Wil je nog extra functionaliteit toevoegen?
provider: deepseek
model: deepseek-chat
Hier is een Vue.js component voor een registratieformulier met validatie:
```vue
<template>
<form @submit.prevent="handleSubmit" class="registration-form">
<div class="form-group">
<label for="name">Naam:</label>
<input
type="text"
id="name"
v-model="formData.name"
:class="{ 'error': errors.name }"
@blur="validateField('name')"
/>
<span v-if="errors.name" class="error-message">{{ errors.name }}</span>
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input
type="email"
id="email"
v-model="formData.email"
:class="{ 'error': errors.email }"
@blur="validateField('email')"
@input="validateField('email')"
/>
<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
</div>
<button type="submit" :disabled="isSubmitting">Registreren</button>
</form>
</template>
<script>
export default {
name: 'RegistrationForm',
data() {
return {
formData: {
name: '',
email: ''
},
errors: {
name: '',
email: ''
},
isSubmitting: false
}
},
methods: {
validateField(fieldName) {
this.errors[fieldName] = ''
if (fieldName === 'name') {
if (!this.formData.name.trim()) {
this.errors.name = 'Naam is verplicht'
}
}
if (fieldName === 'email') {
if (!this.formData.email.trim()) {
this.errors.email = 'E-mail is verplicht'
} else if (!this.isValidEmail(this.formData.email)) {
this.errors.email = 'Email is ongeldig'
}
}
},
isValidEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
return emailRegex.test(email)
},
validateForm() {
this.validateField('name')
this.validateField('email')
return !this.errors.name && !this.errors.email
},
async handleSubmit() {
if (!this.validateForm()) {
return
}
this.isSubmitting = true
try {
// Hier zou je je API call doen
// await api.register(this.formData)
console.log('Formulier verzonden:', this.formData)
alert('Registratie succesvol!')
// Reset formulier
this.formData = {
name: '',
email: ''
}
this.errors = {
name: '',
email: ''
}
} catch (error) {
console.error('Registratie fout:', error)
alert('Er is een fout opgetreden bij de registratie')
} finally {
this.isSubmitting = false
}
}
}
}
</script>
<style scoped>
.registration-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
input.error {
border-color: #ff4444;
}
.error-message {
color: #ff4444;
font-size: 14px;
margin-top: 5px;
display: block;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background-color: #45a049;
}
</style>
```
Deze component bevat:
**Functionaliteiten:**
- Validatie voor naam (verplicht veld)
- Validatie voor e-mail (verplicht + geldig formaat)
- Real-time validatie bij blur en input
- Formuliervalidatie bij verzenden
- Foutmeldingen volgens je specificaties
- Loading state tijdens verzenden
**Validatieregels:**
- Naam: mag niet leeg zijn
- E-mail: moet een geldig e-mailadres zijn met @ en domein
**Foutmeldingen:**
- "Naam is verplicht" wanneer naamveld leeg is
- "Email is ongeldig" wanneer het e-mailformaat incorrect is
Je kunt de component aanpassen naar je specifieke behoeften en eventueel extra velden toevoegen.