Flutter Dart实现注册页面文本字段验证的方法

核心实现要点 #

• 所有必填字段空值校验，提示此字段为必填项
• 邮箱字段格式校验，提示请输入有效的邮箱地址
• 邮箱唯一性校验（示例为模拟实现，真实场景需对接后端接口），提示该邮箱已被注册

修改后的完整代码 #

// 声明表单全局键，用于管理表单状态
final _formKey = GlobalKey<FormState>();
// 模拟已注册邮箱集合，真实场景替换为后端接口查询
final List<String> _registeredEmails = ['test@example.com', 'user@demo.com'];

Column(
  children: [
    Form(
      key: _formKey,
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 35),
            child: Container(
              width: 310,
              child: TextFormField(
                controller: _firstnameController,
                decoration: InputDecoration(
                  label: RichText(
                    text: TextSpan(
                        text: '名字',
                        style: GoogleFonts.poppins(
                            color: const Color(0xffc1c1c1),
                            fontSize: 17,
                            letterSpacing: 0.4),
                        children: const [
                          TextSpan(
                              text: ' *',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 21,
                              )),
                        ]),
                  ),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '此字段为必填项';
                  }
                  return null;
                },
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Container(
              width: 310,
              child: TextFormField(
                controller: _lastnameController,
                decoration: InputDecoration(
                  label: RichText(
                    text: TextSpan(
                        text: '姓氏',
                        style: GoogleFonts.poppins(
                            color: const Color(0xffc1c1c1),
                            fontSize: 17,
                            letterSpacing: 0.4),
                        children: const [
                          TextSpan(
                              text: ' *',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 21,
                              )),
                        ]),
                  ),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '此字段为必填项';
                  }
                  return null;
                },
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Container(
              width: 310,
              child: TextFormField(
                controller: _emailController,
                keyboardType: TextInputType.emailAddress,
                decoration: InputDecoration(
                  label: RichText(
                    text: TextSpan(
                        text: '输入你的邮箱',
                        style: GoogleFonts.poppins(
                            color: const Color(0xffc1c1c1),
                            fontSize: 17,
                            letterSpacing: 0.4),
                        children: const [
                          TextSpan(
                              text: ' *',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 21,
                              )),
                        ]),
                  ),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '此字段为必填项';
                  }
                  // 邮箱格式校验正则
                  final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
                  if (!emailRegex.hasMatch(value.trim())) {
                    return '请输入有效的邮箱地址';
                  }
                  // 模拟邮箱唯一性校验
                  if (_registeredEmails.contains(value.trim())) {
                    return '该邮箱已被注册';
                  }
                  return null;
                },
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 20),
            child: Container(
              width: 310,
              child: TextFormField(
                controller: _passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  label: RichText(
                    text: TextSpan(
                        text: '输入你的密码',
                        style: GoogleFonts.poppins(
                            color: const Color(0xffc1c1c1),
                            fontSize: 17,
                            letterSpacing: 0.4),
                        children: const [
                          TextSpan(
                              text: ' *',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 21,
                              )),
                        ]),
                  ),
                  suffixIcon: const Icon(CupertinoIcons.eye_slash_fill, size: 25),
                ),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return '此字段为必填项';
                  }
                  return null;
                },
              ),
            ),
          ),
          // 注册按钮：触发表单验证
          Padding(
            padding: const EdgeInsets.only(top: 30),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // 验证通过，执行注册逻辑
                }
              },
              child: const Text('注册'),
            ),
          )
        ],
      ),
    ),
  ],
);

关键说明 #

• 表单全局键：_formKey用于触发全表单验证，点击注册按钮时调用_formKey.currentState!.validate()即可校验所有字段
• 邮箱格式校验：使用正则表达式实现基础格式验证，可根据需求调整正则规则
• 唯一性校验：示例用本地集合模拟，真实项目中需调用后端接口查询数据库，判断邮箱是否已被注册
• 验证逻辑：每个TextFormField的validator返回错误提示文本时，输入框会自动显示该提示；返回null则表示验证通过

内容的提问来源于stack exchange，提问作者Divya