当前位置：首页 > news >正文

Flutter 表单处理与验证详解：构建健壮的表单系统

news 2026/5/31 23:44:28

Flutter 表单处理与验证详解：构建健壮的表单系统

引言

表单是移动应用中不可或缺的一部分，良好的表单处理和验证能够提升用户体验和数据质量。Flutter 提供了强大的表单处理能力，包括表单验证、输入控制和错误提示等功能。

基础表单

创建表单

class LoginForm extends StatefulWidget { const LoginForm({super.key}); @override State<LoginForm> createState() => _LoginFormState(); } class _LoginFormState extends State<LoginForm> { final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( decoration: const InputDecoration(labelText: 'Email'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your email'; } return null; }, ), TextFormField( decoration: const InputDecoration(labelText: 'Password'), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your password'; } return null; }, ), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Processing Data')), ); } }, child: const Text('Submit'), ), ], ), ); } }

表单验证

内置验证器

TextFormField( decoration: const InputDecoration(labelText: 'Email'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter an email'; } final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); if (!emailRegex.hasMatch(value)) { return 'Please enter a valid email'; } return null; }, )

密码强度验证

TextFormField( decoration: const InputDecoration(labelText: 'Password'), obscureText: true, validator: (value) { if (value == null || value.isEmpty) { return 'Please enter a password'; } if (value.length < 8) { return 'Password must be at least 8 characters'; } if (!value.contains(RegExp(r'[A-Z]'))) { return 'Password must contain at least one uppercase letter'; } if (!value.contains(RegExp(r'[0-9]'))) { return 'Password must contain at least one number'; } return null; }, )

确认密码验证

final _passwordController = TextEditingController(); final _confirmPasswordController = TextEditingController(); TextFormField( controller: _confirmPasswordController, decoration: const InputDecoration(labelText: 'Confirm Password'), obscureText: true, validator: (value) { if (value != _passwordController.text) { return 'Passwords do not match'; } return null; }, )

自定义验证器

创建验证器类

class EmailValidator { static String? validate(String? value) { if (value == null || value.isEmpty) { return 'Please enter your email'; } final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); if (!emailRegex.hasMatch(value)) { return 'Please enter a valid email address'; } return null; } } class PasswordValidator { static String? validate(String? value) { if (value == null || value.isEmpty) { return 'Please enter your password'; } if (value.length < 8) { return 'Password must be at least 8 characters'; } return null; } }

使用自定义验证器

TextFormField( decoration: const InputDecoration(labelText: 'Email'), validator: EmailValidator.validate, )

表单状态管理

使用 TextEditingController

class MyForm extends StatefulWidget { const MyForm({super.key}); @override State<MyForm> createState() => _MyFormState(); } class _MyFormState extends State<MyForm> { final _emailController = TextEditingController(); final _passwordController = TextEditingController(); final _formKey = GlobalKey<FormState>(); @override void dispose() { _emailController.dispose(); _passwordController.dispose(); super.dispose(); } void _submitForm() { if (_formKey.currentState!.validate()) { print('Email: ${_emailController.text}'); print('Password: ${_passwordController.text}'); } } @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( controller: _emailController, decoration: const InputDecoration(labelText: 'Email'), validator: EmailValidator.validate, ), TextFormField( controller: _passwordController, decoration: const InputDecoration(labelText: 'Password'), obscureText: true, validator: PasswordValidator.validate, ), ElevatedButton( onPressed: _submitForm, child: const Text('Submit'), ), ], ), ); } }

异步验证

用户名可用性检查

TextFormField( decoration: const InputDecoration(labelText: 'Username'), autovalidateMode: AutovalidateMode.onUserInteraction, validator: (value) async { if (value == null || value.isEmpty) { return 'Please enter a username'; } final isAvailable = await checkUsernameAvailability(value); if (!isAvailable) { return 'Username is already taken'; } return null; }, )

自定义异步验证器

class UsernameValidator { static Future<String?> validate(String? value) async { if (value == null || value.isEmpty) { return 'Please enter a username'; } if (value.length < 3) { return 'Username must be at least 3 characters'; } await Future.delayed(const Duration(seconds: 1)); final takenUsernames = ['admin', 'user', 'test']; if (takenUsernames.contains(value.toLowerCase())) { return 'Username is already taken'; } return null; } }

表单样式

自定义输入框样式

TextFormField( decoration: InputDecoration( labelText: 'Email', labelStyle: const TextStyle(color: Colors.grey), hintText: 'Enter your email', hintStyle: const TextStyle(color: Colors.grey[400]), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Colors.grey), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Colors.blue), ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Colors.red), ), ), )

错误样式

TextFormField( decoration: const InputDecoration( labelText: 'Email', errorStyle: TextStyle( color: Colors.red, fontSize: 12, ), ), validator: EmailValidator.validate, )

表单焦点管理

自动聚焦

final _emailFocusNode = FocusNode(); TextFormField( focusNode: _emailFocusNode, decoration: const InputDecoration(labelText: 'Email'), ) @override void initState() { super.initState(); _emailFocusNode.requestFocus(); } @override void dispose() { _emailFocusNode.dispose(); super.dispose(); }

焦点切换

final _emailFocusNode = FocusNode(); final _passwordFocusNode = FocusNode(); TextFormField( focusNode: _emailFocusNode, decoration: const InputDecoration(labelText: 'Email'), textInputAction: TextInputAction.next, onFieldSubmitted: (_) { FocusScope.of(context).requestFocus(_passwordFocusNode); }, ) TextFormField( focusNode: _passwordFocusNode, decoration: const InputDecoration(labelText: 'Password'), obscureText: true, textInputAction: TextInputAction.done, onFieldSubmitted: (_) { _submitForm(); }, )

实战案例：完整注册表单

class RegistrationForm extends StatefulWidget { const RegistrationForm({super.key}); @override State<RegistrationForm> createState() => _RegistrationFormState(); } class _RegistrationFormState extends State<RegistrationForm> { final _formKey = GlobalKey<FormState>(); final _emailController = TextEditingController(); final _passwordController = TextEditingController(); final _confirmPasswordController = TextEditingController(); bool _isLoading = false; @override void dispose() { _emailController.dispose(); _passwordController.dispose(); _confirmPasswordController.dispose(); super.dispose(); } Future<void> _submitForm() async { if (_formKey.currentState!.validate()) { setState(() => _isLoading = true); await Future.delayed(const Duration(seconds: 2)); ScaffoldMessenger.of(context).showSnackBar( const SnackBar(content: Text('Registration successful!')), ); setState(() => _isLoading = false); } } String? _confirmPasswordValidator(String? value) { if (value != _passwordController.text) { return 'Passwords do not match'; } return null; } @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( controller: _emailController, decoration: const InputDecoration(labelText: 'Email'), keyboardType: TextInputType.emailAddress, validator: EmailValidator.validate, ), const SizedBox(height: 16), TextFormField( controller: _passwordController, decoration: const InputDecoration(labelText: 'Password'), obscureText: true, validator: PasswordValidator.validate, ), const SizedBox(height: 16), TextFormField( controller: _confirmPasswordController, decoration: const InputDecoration(labelText: 'Confirm Password'), obscureText: true, validator: _confirmPasswordValidator, ), const SizedBox(height: 24), ElevatedButton( onPressed: _isLoading ? null : _submitForm, child: _isLoading ? const CircularProgressIndicator() : const Text('Register'), ), ], ), ); } }