运行 API 之前的电子邮件验证不稳定

Question

我正在为我的应用制作忘记密码屏幕，API 已集成到我的代码中。当我通过提交空白字段单击“重置密码”按钮时，它运行宁我的 API 代码。但是当我提交空白字段并单击“重置按钮”时，我想运行电子邮件验证。我怎样才能在我的代码中做那部分。感谢您对此的帮助。

import 'package:dio/dio.dart';
import 'package:doctor_app/constants/Button.dart';
import 'package:doctor_app/constants/base_api.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';

import '../constants/colors.dart';

class ForgetPassword extends StatelessWidget {
  const ForgetPassword({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);
    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(
                  height: 20,
                ),
                Text('DOCTOR',
                    style: TextStyle(
                      fontFamily: 'Dubai',
                      fontSize: 30,
                      color: Color(0xff05ABA3),
                      fontWeight: FontWeight.w500,
                    )),
              ],
            ),
            SizedBox(
              height: 90,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.start, children: [
              Text('Forgot your password?',
                  style: TextStyle(
                    height: 1.2,
                    fontFamily: 'Dubai',
                    fontSize: 25,
                    color: Color(0xff040000),
                    fontWeight: FontWeight.w500,
                  )),
            ]),
            // Spacer(
            //   flex: 1,
            // ),
            SizedBox(
              height: 20,
            ),
            Column(
              //mainAxisAlignment: MainAxisAlignment.center,
              //crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text('Confirm your email and we will send the Instructions ',
                    style: TextStyle(
                      height: 1.2,
                      fontFamily: 'Dubai',
                      fontSize: 18,
                      color: Color(0xff707070),
                      fontWeight: FontWeight.w100,
                    )),
              ],
            ),
            SizedBox(
              height: 20,
            ),

            ForgetPasswordForm(), //email
            SizedBox(
              height: 5,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'didnt receive an email?',
                  style: TextStyle(
                    height: 1.2,
                    fontFamily: 'Dubai',
                    fontSize: 13,
                    color: Colors.grey,
                    fontWeight: FontWeight.w500,
                  ),
                ),
                SizedBox(
                  width: 5,
                ),
                Align(
                    alignment: Alignment.bottomLeft,
                    child: InkWell(
                        onTap: () {
                          // add action here whatever you want.
                        },
                        child: Text('send again  ',
                            style: TextStyle(
                              height: 1.2,
                              fontFamily: 'Dubai',
                              fontSize: 13,
                              color: Colors.blue,
                              fontWeight: FontWeight.w500,
                            ))))
              ],
            ),
            Spacer(
              flex: 1,
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    color: Color(0xff05ABA3),
                  ),
                  height: 5,
                  width: 120,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

class ForgetPasswordForm extends StatefulWidget {
  const ForgetPasswordForm({Key? key}) : super(key: key);

  @override
  _ForgetPasswordFormState createState() => _ForgetPasswordFormState();
}

class _ForgetPasswordFormState extends State<ForgetPasswordForm> {
  final _formKey = GlobalKey<FormState>();

  //String _userName = "";

  String email = "";

  Future Resetpassword() async {
    try {
      var response = await Dio().post(BASE_API+'user/forgotpassword', data: {
        "email": email,
      });

      if (response.data["data"] ==
          "Please check your email to reset password.") {
        Get.snackbar("success", "Email Sent Successfully!");
        //Get.to(VideoScreen());

      } else {
        Get.snackbar("Error", "No Server Found",
            backgroundColor: textWhite.withOpacity(0.5),
            borderWidth: 1,
            borderColor: textGrey,
            colorText: textGrey,
            icon: Icon(
              Icons.error_outline_outlined,
              color: heartRed,
              size: 30,
            ));
      }
      print("res: $response");
    } catch (e) {
      Get.snackbar("Error", "Something went wrong.Please contact admin",
          backgroundColor: textWhite.withOpacity(0.5),
          borderWidth: 1,
          borderColor: textGrey,
          colorText: textGrey,
          icon: Icon(
            Icons.error_outline_outlined,
            color: heartRed,
            size: 30,
          ));
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Form(
            child: Container(
                key: _formKey,
                child: Container(
                    child: Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: Column(children: [
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      decoration: const InputDecoration(
                          hintText: "Email",
                          hintStyle: TextStyle(
                              color: textGrey,
                              fontFamily: "Dubai",
                              fontSize: 14)),
                      validator: (String? Email) {
                        if (Email != null && Email.isEmpty) {
                          return "Email can't be empty";
                        }
                        return null;
                      },
                      onChanged: (String? text) {
                        email = text!;
                        print(email);
                      },
                    ),
                    SizedBox(
                      height: 50,
                    ),
                    Container(
                      child: GestureDetector(
                        child: ButtonM("Reset Password"),
                        onTap: () async {
                          Resetpassword();
                        },
                      ),
                    )
                  ]),
                )))));
  }
}

Answer 1

只需像下面这样包装您的 ResetPassword() 方法：

 if (_formKey.currentState!.validate()) {
   Resetpassword();
 }

这将检查验证。

确保附加到表单小部件而不是容器的键

class ForgetPasswordForm extends StatefulWidget {
  const ForgetPasswordForm({Key? key}) : super(key: key);

  @override
  _ForgetPasswordFormState createState() => _ForgetPasswordFormState();
}

class _ForgetPasswordFormState extends State<ForgetPasswordForm> {
  final _formKey = GlobalKey<FormState>();

  String email = "";

  Future Resetpassword() async {
    print("123");
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Form(
           key: _formKey,
          autovalidateMode: AutovalidateMode.disabled,
            child: Container(
                child: Container(
                    child: Padding(
                  padding: const EdgeInsets.all(30.0),
                  child: Column(children: [
                    TextFormField(
                      keyboardType: TextInputType.emailAddress,
                      decoration: const InputDecoration(
                          hintText: "Email",
                          hintStyle: TextStyle(
                              color: Colors.grey,
                              fontFamily: "Dubai",
                              fontSize: 14)),
                      validator: (String? Email) {
                        if (Email != null && Email.isEmpty) {
                          return "Email can't be empty";
                        }
                        return null;
                      },
                      onChanged: (String? text) {
                        email = text!;
                        print(email);
                      },
                    ),
                    SizedBox(
                      height: 50,
                    ),
                    Container(
                      child: TextButton(
                        child: Text("Reset Password"),
                        onPressed: () async {
                          if (_formKey.currentState!.validate()) {
                            Resetpassword();
                          }
                        },
                      ),
                    )
                  ]),
                )))));
  }
}

Answer 2

添加变量

  final GlobalKey<FormState> keys = GlobalKey<FormState>();

这样验证

 if (_keys.currentState!.validate()) {
   Resetpassword();
 }

运行 API 之前的电子邮件验证不稳定

email validation flutter before running API

validation

flutter