Question

我正在使用一个表单和一些TextFormFields。我可以验证用户输入，如下所示：

final _form = GlobalKey<FormState>();

void saveForm(){

_form.currentState.validate()

}

//saveForm runs when a save button is pressed.

我想知道当TextField失去焦点时是否可以为它运行验证功能。（我不想通过单击按钮来验证输入，而是想在用户使用时运行验证功能。更改TextField。）

Answer 1

我认为您只想在表单中添加autovalidate: true,，以便当您关注变更验证时就可以调用

 Form(
         key: _formKey,
         autovalidate: true,
         child:/*...*/
    )

像这样创建表单

  var _formKey = GlobalKey<FormState>();
  bool _autoValidate = false;

  @override
  Widget build(BuildContext context) {
    return Form(
          key: _formKey,
          autovalidate: _autoValidate,
          child: /* ... */
        ),
      ),
    );
  }

当您单击保存时

void _onSignUpClicked(BuildContext context) {
    if (_formKey.currentState.validate()) {
      Scaffold.of(context).showSnackBar(SnackBar(content: Text("Successfully sign up")));
    } else {
      setState(() {
        _autoValidate = true;
      });
    }
  }

Answer 2

将 autoValidateMode 添加到您的表单中

<块引用>

autovalidateMode：AutovalidateMode.onUserInteraction，

child: Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.onUserInteraction,
      child: Column()
)

自动验证还有另外两种模式禁用（从不自动验证）和始终（在所有情况下，即使没有任何用户交互）。

在这里阅读更多

Answer 3

将TextEditingController放入TextField并使用addListener获取所有更改。并在该监听器中验证过程。

Answer 4

请注意，1.19之后，弃用了现在接受的解决方案
现在，AutovalidateMode引入了三个基本常量的新参数：

始终：用于自动验证Form和FormField，即使没有用户交互也是如此。
已禁用：不会进行自动验证。
onUserInteraction：仅在每次用户交互后才用于自动验证Form和FormField。

焦点更改时的TextFormField验证

4 个答案: