Flutter表单验证插件tf_validator的使用

Flutter表单验证插件tf_validator的使用

tf_validator 是一个用于 Flutter 的表单验证插件。它可以帮助开发者轻松地实现表单字段的验证逻辑。

获取开始

本项目是一个 Dart 包，包含可以跨多个 Flutter 或 Dart 项目的代码模块。如果您刚开始学习 Flutter，可以查看我们的在线文档，其中包括教程、示例、移动开发指南以及完整的 API 参考。

示例代码

下面是一个使用 tf_validator 插件的完整示例，展示了如何在 Flutter 应用中实现表单验证。

import 'package:flutter/material.dart';
import 'package:tf_validator/tf_validator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('tf_validator 示例'),
        ),
        body: FormValidatorExample(),
      ),
    );
  }
}

class FormValidatorExample extends StatefulWidget {
  @override
  _FormValidatorExampleState createState() => _FormValidatorExampleState();
}

class _FormValidatorExampleState extends State<FormValidatorExample> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  // 控制器，用于获取输入值
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              controller: _emailController,
              decoration: InputDecoration(labelText: '邮箱'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入邮箱地址';
                }
                if (!RegExp(r'^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$').hasMatch(value)) {
                  return '请输入有效的邮箱地址';
                }
                return null;
              },
            ),
            SizedBox(height: 16),
            TextFormField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: '密码'),
              obscureText: true,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入密码';
                }
                if (value.length < 6) {
                  return '密码长度不能少于6个字符';
                }
                return null;
              },
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 验证通过，执行操作
                  print('验证通过');
                } else {
                  // 验证失败，不执行任何操作
                  print('验证失败');
                }
              },
              child: Text('提交'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}

代码解释

1. 导入库

   import 'package:flutter/material.dart';
   import 'package:tf_validator/tf_validator.dart';
   

2. 创建主应用

   void main() {
     runApp(MyApp());
   }
   

3. 创建应用界面

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('tf_validator 示例'),
           ),
           body: FormValidatorExample(),
         ),
       );
     }
   }
   

4. 创建表单验证示例

   class FormValidatorExample extends StatefulWidget {
     @override
     _FormValidatorExampleState createState() => _FormValidatorExampleState();
   }
   

5. 实现表单验证逻辑

   class _FormValidatorExampleState extends State<FormValidatorExample> {
     final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
     final TextEditingController _emailController = TextEditingController();
     final TextEditingController _passwordController = TextEditingController();
   
     @override
     Widget build(BuildContext context) {
       return Padding(
         padding: const EdgeInsets.all(16.0),
         child: Form(
           key: _formKey,
           child: Column(
             children: [
               TextFormField(
                 controller: _emailController,
                 decoration: InputDecoration(labelText: '邮箱'),
                 validator: (value) {
                   if (value == null || value.isEmpty) {
                     return '请输入邮箱地址';
                   }
                   if (!RegExp(r'^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$').hasMatch(value)) {
                     return '请输入有效的邮箱地址';
                   }
                   return null;
                 },
               ),
               SizedBox(height: 16),
               TextFormField(
                 controller: _passwordController,
                 decoration: InputDecoration(labelText: '密码'),
                 obscureText: true,
                 validator: (value) {
                   if (value == null || value.isEmpty) {
                     return '请输入密码';
                   }
                   if (value.length < 6) {
                     return '密码长度不能少于6个字符';
                   }
                   return null;
                 },
               ),
               SizedBox(height: 24),
               ElevatedButton(
                 onPressed: () {
                   if (_formKey.currentState!.validate()) {
                     print('验证通过');
                   } else {
                     print('验证失败');
                   }
                 },
                 child: Text('提交'),
               ),
             ],
           ),
         ),
       );
     }
   
     @override
     void dispose() {
       _emailController.dispose();
       _passwordController.dispose();
       super.dispose();
     }
   }