Flutter中传递对比TextEditingController实现密码确认校验及报错解决

报错修复方案 #

你遇到的报错核心原因是不等运算符写反了：Dart中判断两个值不相等的判断符号是!=，你代码中写成了=!，编译器会把这段代码解析为value被赋值为!_passwordController.text，而逻辑非运算符!后面只能跟布尔类型，你后面跟的是字符串类型的密码值，所以触发了类型错误。

把if (value =! _passwordController.text)改成if (value != _passwordController.text)即可修复当前报错。

其他需要修复的逻辑问题 #

除了符号错误外，你的实现还有几个隐藏问题：

• 校验函数参数不匹配
  TextFormField的validator要求传入的函数只能接收输入值value一个参数，你当前定义的passwordInputValidator需要传入两个参数，直接传递函数名会触发参数不匹配的运行时错误。
• 没有处理空值和校验通过的返回值
  你没有处理输入为空的情况，同时校验通过时需要显式返回null，否则会触发隐含的空安全错误。
• 参数无类型声明
  MakeInput的所有参数都没有声明类型，全部为dynamic，很容易触发隐含的类型错误。

完整修复代码 #

1. 修正校验函数和组件写法

// 密码输入框校验函数示例
String? passwordValidator(String? value) {
  if (value == null || value.trim().isEmpty) {
    return '请输入密码';
  }
  if (value.length < 6) {
    return '密码长度不能少于6位';
  }
  return null;
}

// 确认密码校验函数
String? confirmPasswordValidator(String? value) {
  if (value == null || value.trim().isEmpty) {
    return '请输入确认密码';
  }
  if (value != _passwordController.text.trim()) {
    return '两次输入的密码不一致';
  }
  return null;
}

// 给MakeInput加上明确的参数类型
Widget MakeInput(String label, bool obscureText, FormFieldValidator<String?> validator, TextEditingController controller) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(
        label,
        style: TextStyle(
            fontSize: 15, fontWeight: FontWeight.w400, color: Colors.white),
      ),
      SizedBox(
        height: 5,
      ),
      TextFormField(
          obscureText: obscureText,
          controller: controller,
          style: TextStyle(color: Colors.white),
          // 开启用户输入时自动校验
          autovalidateMode: AutovalidateMode.onUserInteraction,
          decoration: InputDecoration(
              contentPadding:
              EdgeInsets.symmetric(vertical: 0, horizontal: 12),
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800]!)),
              border: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.purple[800]!)),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.purple[800]!, width: 2.0),
              )),
          validator: validator),
    ],
  );
}

2. 调用示例

MakeInput('Type your password', true,
    passwordValidator, _passwordController),
MakeInput(
    'Confirm Password',
    true,
    confirmPasswordValidator,
    _confirmpasswordController),

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