Teknikker til inputvalidering
Implementer validering på klientsiden af formularfelter ved hjælp af validatorer, regulære udtryk og brugerdefineret logik for at sikre dataintegriteten.
Teknikker til inputvalidering er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.
Hvad er inputvalidering?
Når brugere indtaster data i din app, skal du sikre dig, at de er korrekte og sikre. Denne proces kaldes inputvalidering.
Det er afgørende for at bevare datakvaliteten og forhindre fejl eller sikkerhedsproblemer, så din applikation fungerer som forventet.
Hvorfor validere brugerinput?
Validering hjælper på mange måder med at skabe robuste og brugervenlige applikationer:
- Dataintegritet: Sikrer, at data følger de forventede formater (f.eks. ligner en e-mailadresse en e-mailadresse).
- Brugeroplevelse: Hjælper brugerne med at indtaste korrekte oplysninger og mindsker frustration.
- Sikkerhed: Forhindrer skadeligt input, der kunne udnytte din app (f.eks. SQL-injektion).
- Forretningslogik: Sikrer, at data opfylder bestemte forretningsregler (f.eks. alderskrav og entydige brugernavne).
Validatoren i TextFormField
I Flutter har TextFormField-widgetten en særlig egenskab, der hedder validator. Denne egenskab tager imod en funktion, som kontrollerer inputværdien.
Hvis inputtet er ugyldigt, skal funktionen returnere en fejlmeddelelse (en String). Hvis det er gyldigt, skal den returnere null.
Grundlæggende kontrol af tomme felter
Lad os se på en enkel validator, der kontrollerer, om et tekstfelt er tomt. Hvis det er tomt, vises en fejlmeddelelse under feltet.
Prøv at skrive noget, slet det derefter, og send formularen for at se fejlen.
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'),
),
),
],
),
);
}
}
Visning af valideringsfejl
Når en validator-funktion returnerer en String (en fejlmeddelelse), viser TextFormField automatisk denne meddelelse under inputfeltet med en tydelig rød farve.
Den umiddelbare visuelle feedback hjælper brugerne med at forstå, hvad der gik galt, og hvordan det kan løses, hvilket forbedrer den samlede brugeroplevelse.
Tilpasset logik: Kontrol af adgangskode
Du kan skrive en hvilken som helst tilpasset logik i din validatorfunktion. Her kontrollerer vi, om en adgangskode er mindst 6 tegn lang, hvilket er en almindelig sikkerhedspraksis.
Det viser, hvordan du implementerer regler, der går ud over en simpel kontrol af tomme felter.
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'),
),
),
],
),
);
}
}
Regulære udtryk (Regex)
Til mere komplekse valideringsmønstre, som kontrol af e-mailformater, telefonnumre eller bestemte alfanumeriske sekvenser, er regulære udtryk (Regex) utroligt effektive.
Et regulært udtryk er en sekvens af tegn, der definerer et søgemønster. Darts RegExp-klasse gør det nemt at bruge dem.
Validering af e-mail med Regex
Her kan du se, hvordan du bruger et simpelt regulært udtryk til at validere formatet på en e-mailadresse. Det kontrollerer et grundlæggende mønster: text@text.domain.
Husk, at omfattende validering af e-mailadresser kan være komplekst, men dette regulære udtryk er et godt udgangspunkt for almindelige formater.
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'),
),
),
],
),
);
}
}
Udløsning af validering manuelt
Validering udløses typisk, når brugeren forsøger at sende formularen. Det gør du ved at kalde _formKey.currentState!.validate() i en onPressed-handler for en knap.
Denne metode kører alle validatorer i Form og returnerer true, hvis alle er gyldige, og ellers false. Du kan også bruge autovalidateMode på Form-widgetten til at validere input, mens det ændres, som vist i eksemplet.
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'),
),
),
],
),
);
}
}
Valideringskontrol
Hvilke af følgende er gyldige måder at implementere inputvalidering i Flutter på?
Opsummering: Inputvalidering
I denne lektion lærte du om inputvalidering på klientsiden i Flutter.
- Vi gennemgik, hvorfor validering er afgørende for dataintegritet, brugeroplevelse og sikkerhed.
- Du brugte egenskaben
validatoriTextFormFieldtil at definere valideringsregler. - Vi undersøgte, hvordan du implementerer tilpasset logik og bruger
RegExptil komplekse mønstre. - Til sidst så du, hvordan validering udløses ved hjælp af
_formKey.currentState!.validate()ogautovalidateMode.
Godt gået! Nu er du klar til at bygge mere robuste og brugervenlige formularer.
Lær Dart med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 88
Ofte stillede spørgsmål
Er lektionen “Teknikker til inputvalidering” gratis?
Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Teknikker til inputvalidering”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Teknikker til inputvalidering”?
Implementer validering på klientsiden af formularfelter ved hjælp af validatorer, regulære udtryk og brugerdefineret logik for at sikre dataintegriteten. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?
Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Teknikker til inputvalidering”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?
Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Form-widget og controllere
- Teknikker til inputvalidering
- Brugerdefinerede formularfelter
- Fokus, tastatur og input-UX