Flutter Textformfield验证器将最后一个Textformfield集中在验证错误上，而不是第一个

Question

我有两个TextFormFields，它专注于密码字段在验证错误上，即使电子邮件字段已经有错误＆amp;在密码字段之前。

知道这里怎么了吗？

---

              //Email
              TextFormField(
              controller: _emailController,
              focusNode: _emailFocus,         
              validator: (value) {
                String? err = validateEmail(value);
                if (err != null) {
                  _emailFocus.requestFocus();
                }
                return err;
              },
            ),
           //Password
            TextFormField(
              controller: _passwordController,
              focusNode: _passwordFocus,
              validator: (value) {
                String? err = validatePassword(value);
                if (err != null) {
                  _passwordFocus.requestFocus();
                }
                return err;
              },           
           ),    

String? validateEmail(String? value) {
  String pattern = r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]"
      r"{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]"
      r"{0,253}[a-zA-Z0-9])?)*$";
  RegExp regex = RegExp(pattern);
  if (value == null || value.isEmpty || !regex.hasMatch(value)) {
    return 'Enter a valid email address';
  } else {
    return null;
  }
}

String? validatePassword(String? value) {
  String pattern = r"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$";
  RegExp regex = RegExp(pattern);
  if (value == null || value.isEmpty) {
    return 'Required';
  }
  if (value.length < 8) {
    return "Length should be 8 or more";
  }
  if (!regex.hasMatch(value)) {
    return "Must contain atleast 1 uppecase, 1 lowercase, 1 special character,";
  }
  return null;
}

忽略这个愚蠢的段落：（这只是一堆文字，以说明我添加了更多问题细节，即使不是必需的，也不可用））

Answer 1

用表单窗口小部件将其包装，并仅在按钮上单击以下单击时进行验证。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

// Create a Form widget.
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            // The validator receives the text that the user has entered.
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Validate returns true if the form is valid, or false otherwise.
                if (_formKey.currentState!.validate()) {
                  // If the form is valid, display a snackbar. In the real world,
                  // you'd often call a server or save the information in a database.
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

检查一下是否有详细的说明

https://docs.flutter.dev/cookbook/cookbook/forms/forms/validation

如果是空的，请重点请求。如果两者都是null，那将始终保持关注密码字段

Answer 2

问题

您有2个验证器，最后一个将作用。这意味着，如果您的两个TextFormField不有效，那么最后一个总是最后一个工作，而您的焦点则放在最后一个。

解决方案

如果Email FocusNode并未像以下那样的重点，请检查另一个内部的另一个焦点node和焦点密码区域

//Password
TextFormField(
  controller: _passwordController,
  focusNode: _passwordFocus,
  validator: (value) {
    String? err = validatePassword(value);
    if (err != null) {
        if(!_emailFocus.hasFocus){
          _passwordFocus.requestFocus();
        }
    }
    return err;
  },           
),