Flutter：表单验证同时验证所有文本字段

Posted 2023-03-07

【中文标题】Flutter：表单验证同时验证所有文本字段

【英文标题】：Flutter: Form validation validates all textfields together

【发布时间】：2021-04-23 13:07:24

【问题描述】：

我正在尝试验证具有电子邮件和密码字段的登录表单。验证模式设置为onUserInteraction。

但当前的行为，即使开始在电子邮件字段上输入，也会验证密码字段。 。 我想要实现的是

验证单个文本字段。不在一起

也许，仅在对焦后验证（模糊）

Form(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  onChanged: () 
    controller.isValidForm.value =
        controller.formKey.currentState.validate();
  ,
  key: controller.formKey,
  child: Column(
    children: <Widget>[
      FormTextField(
        validator: (value) 
          if (value.isEmpty) 
            return 'Please enter an email address';
           else if (!controller.emailRegExp.hasMatch(value)) 
            return 'Invalid email address!';
          
          return null;
        ,
        onSaved: (value) 
          controller.model.emailAddress = value;
        ,
        title: "Email id",
      ),
      UIHelper.verticalSpaceLarge(),
      FormTextField(
        isObscure: controller.isPasswordObsecured.value,
        validator: (value) 
          if (value.isEmpty) 
            return 'Please enter a password';
          
          return null;
        ,
        onSaved: (value) 
          controller.model.password = value;
        ,
        title: "Password",
        isObscureCallBack: controller.changePasswordVisibility,
        isPasswordField: true,
      ),
      UIHelper.verticalSpaceExtraLarge(),
      FormSubmitButton(
        isValidForm: controller.isValidForm.value,
        onPressed: () 
          if (controller.formKey.currentState.validate()) 
            controller.formKey.currentState.save();
            print(controller.model);
            controller.doLogin();
          
        ,
        label: "Login",
      ),
    ],
  ),
),

【问题讨论】：

这是因为你在 Form 上使用了 onChanged。

尝试删除onChanged: () controller.isValidForm.value = controller.formKey.currentState.validate(); ,

如果你想继续使用这种风格，那么你将不得不制作 2 个不同的键。

删除 onChange 对验证行为没有影响 @UjjwalRaijada

验证器仅在被调用时才起作用。它在 onChange 和 FormSubmitButton 上被调用。请尝试删除 onChange 并使用热重载。它应该工作/

【参考方案1】：

继续我们的谈话......我所做的是，我创建了一个在提交表单时调用的函数。那是检查验证的时间，如果有错误，则会显示错误。 我要验证的代码：

void _submit() async 
  final isValid = _form.currentState!.validate();   // validation
  if (!isValid)      // if validation is false it will return error as per mentioned by you in validator
    return;
  
  _form.currentState!.save();      // if everything is fine, it will save the form and proceed further

  // code from here if the form gets validated

【参考方案2】：

您应该将autovalidateMode: AutovalidateMode.onUserInteraction 放在FormTextField 内，而不是放在Form 内，以便在用户交互时启用单个文本字段验证（更改/模糊）

Form(
  //not here
  //autovalidateMode: AutovalidateMode.onUserInteraction,
  onChanged: () 
    controller.isValidForm.value =
        controller.formKey.currentState.validate();
  ,
  key: controller.formKey,
  child: Column(
    children: <Widget>[
      FormTextField(
        // put it here
        autovalidateMode: AutovalidateMode.onUserInteraction,
        ...
        title: "Email id",
      ),
      UIHelper.verticalSpaceLarge(),
      FormTextField(
        // and put it here
        autovalidateMode: AutovalidateMode.onUserInteraction,
        ...
        title: "Password",
      ),
      ...
    ],
  ),
),