如何强制用户在 Flutter 的 TextField 中输入至少 2 个字符?

Ben*_* H. 3 input textfield flutter

我想在 Flutter 中构建一个 TextField,用户必须在其中输入他的名字,但我想强制他至少输入 2 个字符。

\n\n

这是我的代码:

\n\n
TextField(\n                    autofocus: true,\n                    textCapitalization: TextCapitalization.words,\n                    textAlign: TextAlign.center,\n                    decoration: InputDecoration(\n                      labelStyle: TextStyle(color: Colors.blue[900]),\n                      border: InputBorder.none,\n                      hintText: \'VORNAME\',\n                    ),\n                    style: TextStyle(\n                        color: Colors.blue[900],\n                        fontWeight: FontWeight.w600,\n                        fontSize: MediaQuery.of(context).size.width * 0.075),\n                    cursorColor: Colors.greenAccent,\n                    inputFormatters: <TextInputFormatter>[\n                      WhitelistingTextInputFormatter(RegExp("[a-zA-Z\xc3\x84\xc3\xa4\xc3\x96\xc3\xb6\xc3\x9c\xc3\xbc]")) //Only Text as input\n                    ],\n                    onChanged: (value) {\n                      userData.forename = value;\n                    },\n                    onSubmitted: (value) {\n                      Navigator.of(context).push(\n                          CupertinoPageRoute(builder: (context) => SurName()));\n                    }),\n
Run Code Online (Sandbox Code Playgroud)\n\n

我怎样才能做到这一点?\n提前谢谢您!

\n\n

\n

小智 5

对于文本字段验证,请使用 TextFormField 而不是 TextField。\nTextFormField 需要用表单小部件包装(如果有两个以上文本表单字段,您可以用表单小部件包装其父小部件)。表单小部件需要 key 和 autovalidate 布尔值(它的可选,但建议在用户尚未验证时向用户显示消息,并且一旦验证消息就停止显示)。我们创建两个变量并将其分配给 Form。然后我们需要一个验证器,在其中根据我们的要求进行验证。(如果您需要添加更多验证,您可以添加多个 if 条件。)。最后在提交的字段上,我们检查用户是否有验证表单 如果验证通过,我们将执行所需的操作,否则我们将 autovalidate 变量设置为 true 以执行自动验证。

\n\n
  var formKey = GlobalKey<FormState>();\n  bool autoValidate = false;\n\n\n         Form(\n              key: formKey,\n              autovalidate: autoValidate,\n              child: TextFormField(\n                validator: (value){\n                 return value.length < 2 ? \'Name must be greater than two characters\' : null;\n                },\n                  autofocus: true,\n                  textCapitalization: TextCapitalization.words,\n                  textAlign: TextAlign.center,\n                  decoration: InputDecoration(\n                    labelStyle: TextStyle(color: Colors.blue[900]),\n                    border: InputBorder.none,\n                    hintText: \'VORNAME\',\n                  ),\n                  style: TextStyle(\n                      color: Colors.blue[900],\n                      fontWeight: FontWeight.w600,\n                      fontSize: MediaQuery.of(context).size.width * 0.075),\n                  cursorColor: Colors.greenAccent,\n                  inputFormatters: <TextInputFormatter>[\n                    WhitelistingTextInputFormatter(RegExp("[a-zA-Z\xc3\x84\xc3\xa4\xc3\x96\xc3\xb6\xc3\x9c\xc3\xbc]")) //Only Text as input\n                  ],\n                  onChanged: (value) {\n                    userData.forename = value;\n                  },\n                  onFieldSubmitted: (value){\n                    if(formKey.currentState.validate()){\n                      Navigator.of(context).push(\n                          CupertinoPageRoute(builder: (context) => SurName()));\n                    }else{\n                      setState(() {\n                        autoValidate=true;\n                      });\n                    }\n\n                  },\n                  ),\n            ),\n
Run Code Online (Sandbox Code Playgroud)\n