Flutter注册页面Validator验证失效问题求助

你封装了CustomTextField组件并配置了验证逻辑，但点击按钮后，输入为空、格式错误等情况都没触发错误提示，按钮也无任何反应，核心问题出在验证函数的空值处理和布局遮挡错误提示两方面，以下是具体修复步骤：

1. 修复验证函数的空值异常 #

当前密码和确认密码的验证函数直接使用password!，当用户未输入内容时会触发空指针异常，导致Form的validate()方法中断执行，按钮点击后无响应；邮箱验证也缺少空值判断。修改验证逻辑如下：

邮箱验证函数 #

String? validateEmail(String? email) {
  // 先判断是否为空
  if (email == null || email.isEmpty) {
    return "请输入邮箱地址";
  }
  RegExp emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  final isEmailValid = emailRegex.hasMatch(email);
  if (!isEmailValid) {
    return "请输入有效的邮箱格式";
  }
  return null;
}

密码/确认密码验证逻辑 #

替换原来的单行验证，增加空值判断：

validator: (password) {
  if (password == null || password.isEmpty) {
    return "请输入密码";
  }
  if (password.length < 6) {
    return "密码长度不能少于6位";
  }
  return null;
},

2. 调整CustomTextField布局，确保错误提示显示 #

当前CustomTextField使用Stack包裹TextFormField和密码可见性按钮，且外层SizedBox设置了固定height，会导致TextFormField的错误提示被裁剪或遮挡，修改布局：

修改CustomTextField的build方法 #

移除固定height限制，确保错误提示有足够空间显示；同时优化InputDecoration，添加错误文本样式：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: EdgeInsets.symmetric(horizontal: 15),
    child: Center(
      child: SizedBox(
        width: widget.width ?? MediaQuery.of(context).size.width * 0.8,
        // 移除固定height，让组件自适应内容高度
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Stack(
              alignment: Alignment.centerRight,
              children: [
                TextFormField(
                  validator: widget.validator,
                  keyboardType: TextInputType.multiline,
                  controller: widget.controller,
                  obscureText: widget.obscureText && !_showPassword,
                  // 可选：添加实时验证模式
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  decoration: InputDecoration(
                    hintText: widget.hintText,
                    hintStyle: TextStyle(color: Colors.grey),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(40),
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(25),
                      borderSide: BorderSide(color: Colors.white),
                    ),
                    errorBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(25),
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    focusedErrorBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(25),
                      borderSide: BorderSide(color: Colors.red),
                    ),
                    contentPadding: EdgeInsets.only(left: 16),
                    // 设置错误文本样式，确保可见
                    errorStyle: TextStyle(color: Colors.red, fontSize: 12),
                  ),
                  style: _style,
                  textAlign: TextAlign.left,
                ),
                if (widget.obscureText)
                  IconButton(
                    onPressed: () {
                      setState(() {
                        _showPassword = !_showPassword;
                      });
                    },
                    icon: Icon(
                      _showPassword ? Icons.visibility : Icons.visibility_off,
                      color: Colors.grey,
                    ),
                  ),
              ],
            ),
          ],
        ),
      ),
    ),
  );
}

3. 确认Form的验证触发逻辑 #

按钮的onPressed逻辑无需修改，但要确保_formKey是全局唯一且正确绑定到Form组件：

onPressed: () {
  if (_formKey.currentState!.validate()) {
    _signUp();
  }
},

完成以上修改后，点击"Get Started"按钮时，会正确触发所有验证规则，空值、格式错误、长度不足的情况都会显示对应的错误提示，验证通过后才会执行注册逻辑。

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