Technieken voor invoervalidatie
Implementeer client-sidevalidatie voor formuliervelden met validators, reguliere expressies en aangepaste logica om de gegevensintegriteit te waarborgen.
Technieken voor invoervalidatie is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.
Wat is invoervalidatie?
Wanneer gebruikers gegevens in je app invoeren, moet je controleren of die correct en veilig zijn. Dit proces heet invoervalidatie.
Dit is essentieel voor de kwaliteit van gegevens en het voorkomen van fouten of beveiligingsproblemen, zodat je applicatie werkt zoals verwacht.
Waarom gebruikersinvoer valideren?
Validatie helpt op verschillende manieren om robuuste en gebruiksvriendelijke applicaties te maken:
- Gegevensintegriteit: zorgt ervoor dat gegevens aan de verwachte indeling voldoen, bijvoorbeeld dat een e-mailadres eruitziet als een e-mailadres.
- Gebruikerservaring: helpt gebruikers om correcte informatie in te voeren en vermindert frustratie.
- Beveiliging: voorkomt schadelijke invoer waarmee je app kan worden misbruikt, zoals SQL-injectie.
- Bedrijfslogica: zorgt ervoor dat gegevens aan specifieke bedrijfsregels voldoen, zoals leeftijdsvereisten of unieke gebruikersnamen.
De TextFormField-validator
In Flutter heeft de TextFormField-widget een speciale eigenschap met de naam validator. Deze eigenschap accepteert een functie die de invoerwaarde controleert.
Als de invoer ongeldig is, moet de functie een foutmelding teruggeven (een String). Als de invoer geldig is, moet de functie null teruggeven.
Eenvoudige controle op een leeg veld
Laten we een eenvoudige validator bekijken die controleert of een tekstveld leeg is. Als dat zo is, verschijnt er een foutmelding onder het veld.
Typ iets, verwijder het daarna en verzend het formulier om de fout te zien.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Basic Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your name',
labelText: 'Name',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
Validatiefouten weergeven
Wanneer een validator-functie een String (een foutmelding) teruggeeft, toont de TextFormField deze melding automatisch onder het invoerveld in een opvallende rode kleur.
Deze directe visuele feedback helpt gebruikers te begrijpen wat er misging en hoe ze het kunnen oplossen, waardoor de algehele gebruikerservaring verbetert.
Aangepaste logica: wachtwoord controleren
Je kunt elke gewenste aangepaste logica in je validatorfunctie schrijven. Hier controleren we of een wachtwoord minstens 6 tekens lang is, wat een gebruikelijke beveiligingspraktijk is.
Dit laat zien hoe je regels kunt implementeren die verder gaan dan eenvoudige controles op lege velden.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Custom Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: true,
decoration: const InputDecoration(
hintText: 'Enter a password',
labelText: 'Password',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a password';
}
if (value.length < 6) {
return 'Password must be at least 6 chars';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Password is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
Reguliere expressies (Regex)
Voor complexere validatiepatronen, zoals het controleren van e-mailindelingen, telefoonnummers of specifieke alfanumerieke reeksen, zijn reguliere expressies (Regex) bijzonder krachtig.
Een regex is een reeks tekens die een zoekpatroon definieert. Met de Dart-klasse RegExp kun je deze eenvoudig gebruiken.
E-mail valideren met Regex
Zo gebruik je een eenvoudige reguliere expressie om de indeling van een e-mailadres te valideren. De expressie controleert een basispatroon: text@text.domain.
Uitgebreide validatie van e-mailadressen kan complex zijn, maar deze regex is een goed uitgangspunt voor veelvoorkomende indelingen.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Regex Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Email Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
final RegExp emailRegex = RegExp(
r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+"
);
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
hintText: 'Enter your email',
labelText: 'Email',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an email';
}
if (!emailRegex.hasMatch(value)) {
return 'Please enter a valid email format';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Email is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
Validatie handmatig starten
Validatie wordt meestal gestart wanneer de gebruiker het formulier probeert te verzenden. Dit doe je door _formKey.currentState!.validate() aan te roepen in een onPressed-handler voor een knop.
Deze methode voert alle validators in de Form uit en geeft true terug als alles geldig is, en anders false. Je kunt ook autovalidateMode op de Form-widget gebruiken om invoer tijdens het wijzigen te valideren, zoals in het voorbeeld.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Auto Validate Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Auto-Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
// Auto-validate as user types
autovalidateMode: AutovalidateMode.always,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter text (min 3 chars)',
labelText: 'Input',
),
validator: (value) {
if (value == null || value.length < 3) {
return 'Must be at least 3 characters';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
// Manual validation still works
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Input is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
Validatiecontrole
Welke van de volgende manieren zijn geldig om invoervalidatie in Flutter te implementeren?
Samenvatting: invoervalidatie
In deze les heb je geleerd over validatie van invoer aan de clientzijde in Flutter.
- We hebben besproken waarom validatie essentieel is voor gegevensintegriteit, gebruikerservaring en beveiliging.
- Je hebt de eigenschap
validatorvanTextFormFieldgebruikt om validatieregels te definiëren. - We hebben bekeken hoe je aangepaste logica implementeert en
RegExpgebruikt voor complexe patronen. - Tot slot heb je gezien hoe je validatie start met
_formKey.currentState!.validate()enautovalidateMode.
Goed gedaan! Je bent nu klaar om robuustere en gebruiksvriendelijkere formulieren te bouwen.
Leer Dart met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 22
- Lessen
- 88
Veelgestelde vragen
Is de les “Technieken voor invoervalidatie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Technieken voor invoervalidatie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.
Wat leer ik in “Technieken voor invoervalidatie”?
Implementeer client-sidevalidatie voor formuliervelden met validators, reguliere expressies en aangepaste logica om de gegevensintegriteit te waarborgen. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?
Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Technieken voor invoervalidatie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?
Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Form-widget en controllers
- Technieken voor invoervalidatie
- Aangepaste formuliervelden
- Focus, toetsenbord en input-UX