flutter：validatorless表单校验

大前端 flutter

发布时间 : 2025-09-07 00:00

字数:1k 阅读 :

入门案例
1. 安装
2. 代码
message 是什么
常用方法

入门案例

安装

flutter pub add validatorless

Validatorless是一个 无状态、简洁的表单验证工具类，专门配合 TextFormField 或自定义表单字段使用。

它其实就是一个 静态方法集合，每个方法返回一个 FormFieldValidator<String>。这些方法都可以直接塞给 TextFormField 的 validator 参数使用。

它的作用是帮助开发者写验证规则，而不用自己在 validator 回调里到处写 if 判断。

代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("注册表单示例")),
        body: const RegisterForm(),
      ),
    );
  }
}

class RegisterForm extends StatefulWidget {
  const RegisterForm({super.key});

  @override
  State<RegisterForm> createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {
  final _formKey = GlobalKey<FormState>();

  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            // 用户名
            TextFormField(
              decoration: const InputDecoration(labelText: "用户名"),
              validator: Validatorless.multiple([
                Validatorless.required("用户名不能为空"),
                Validatorless.min(3, "用户名至少 3 个字符"),
                Validatorless.max(20, "用户名最多 20 个字符"),
              ]),
            ),

            const SizedBox(height: 16),

            // 邮箱
            TextFormField(
              decoration: const InputDecoration(labelText: "邮箱"),
              validator: Validatorless.multiple([
                Validatorless.required("邮箱不能为空"),
                Validatorless.email("请输入正确的邮箱格式"),
              ]),
            ),

            const SizedBox(height: 16),

            // 密码
            TextFormField(
              controller: _passwordController,
              decoration: const InputDecoration(labelText: "密码"),
              obscureText: true,
              validator: Validatorless.multiple([
                Validatorless.required("密码不能为空"),
                Validatorless.min(6, "密码至少 6 位"),
              ]),
            ),

            const SizedBox(height: 16),

            // 确认密码
            TextFormField(
              decoration: const InputDecoration(labelText: "确认密码"),
              obscureText: true,
              validator: Validatorless.multiple([
                Validatorless.required("请再次输入密码"),
                Validatorless.compare(_passwordController, "两次密码不一致"),
              ]),
            ),

            const SizedBox(height: 24),

            // 提交按钮
            ElevatedButton(
              onPressed: () {
                final isValid = _formKey.currentState?.validate() ?? false;
                if (isValid) {
                  ScaffoldMessenger.of(
                    context,
                  ).showSnackBar(const SnackBar(content: Text("验证通过，提交成功！")));
                }
              },
              child: const Text("注册"),
            ),
          ],
        ),
      ),
    );
  }
}

`message` 是什么

在 Validatorless 里，每个方法都需要你传一个 String message。这个 就是验证失败时显示的错误提示文本。

Validatorless的工作机制

每个校验方法返回一个 FormFieldValidator<String>（函数类型）。
当表单调用 validator(value) 时：
- 如果校验通过 → 返回 null（表示没有错误）。
- 如果校验失败 → 返回你传的 message（这个文本会显示在 TextFormField 下方）。

常用方法

必填类

required(String message)：检查是否为空（null 或 ""）。

长度校验

min(int minLength, String message)：检查最小长度。
max(int maxLength, String message)：检查最大长度。
between(int min, int max, String message)：检查长度是否在区间 [min, max]。

validator: Validatorless.multiple([
  Validatorless.required("用户名不能为空"),
  Validatorless.between(3, 10, "用户名长度必须在 3 到 10 之间"),
]),

数字校验

number(String message)：输入必须是数字（允许小数）。
integer(String message)：输入必须是整数。
numbersBetweenInterval(double min, double max, String message)：校验数字是否处于指定的范围内（区间校验）。

validator: Validatorless.number("请输入数字"),

字符串内容比较

compare(TextEditingController controller, String message)：比较输入框内容是否和另一个输入框相同（典型用在密码确认）。
equal(String value, String message)：检查是否等于某个固定值。
different(String value, String message)：检查是否不同于某个固定值。

格式校验

email(String message)：必须是合法邮箱。
regex(Pattern pattern, String message)：自定义正则表达式校验。
cpf(String message)：巴西的个人税号校验（Cadastro de Pessoas Físicas）。
cnpj(String message)：巴西的企业税号校验（Cadastro Nacional da Pessoa Jurídica）。
date(String message)：日期格式校验。
onlyCharacters(String message)：限制只能为字母字符（没有数字、符号等）。
length(int length, String message)：校验字符串长度是否等于指定数值。
phone(String message)：电话号码格式校验（可能针对特定格式，比如某国手机号）。

validator: Validatorless.email("请输入正确的邮箱格式"),

validator: Validatorless.regex(
  RegExp(r'^[0-9]{11}$'),
  "手机号必须是 11 位数字",
),

组合

multiple(List<FormFieldValidator<String>> validators)：把多个校验规则组合在一起，顺序执行。

返回值规则

如果校验失败 → 返回对应的错误字符串（会显示在 TextFormField 下方）。
如果通过 → 返回 null。