Flutter表单验证失效:为何空输入仍能通过验证?
Flutter表单验证失效问题解决
你的代码存在Form组件嵌套的问题:外层Form已经绑定了_formKey,但你在Padding里又嵌套了一个无key的Form,两个TextFormField实际属于内层Form,导致调用_formKey.currentState!.validate()时,根本不会验证这两个输入框,所以空内容也能通过验证跳转。
修复方案
删除内层的Form组件,让TextFormField直接归属于绑定_formKey的外层Form,这样验证逻辑就能正常生效。
修改后的完整代码
import 'package:fir_project/utils/routes.dart'; import 'package:flutter/material.dart'; class LoginPage extends StatefulWidget { const LoginPage({super.key}); @override State<LoginPage> createState() => _LoginPageState(); } class _LoginPageState extends State<LoginPage> { String name = ""; bool changeButton = false; final _formKey = GlobalKey<FormState>(); moveToHome(BuildContext context) async { if (_formKey.currentState!.validate()) { setState(() { changeButton = true; }); await Future.delayed(const Duration(seconds: 1)); await Navigator.pushNamed(context, Myroutes.homeRoute); setState(() { changeButton = false; }); } } @override Widget build(BuildContext context) { return Material( color: Colors.white, child: SingleChildScrollView( child: Form( key: _formKey, child: Column( children: [ Image.asset( "assets/images/loginimg.png", fit: BoxFit.cover, ), const SizedBox( height: 20.0, ), Text( "Welcome $name", style: const TextStyle( fontSize: 28, fontWeight: FontWeight.bold, ), ), const SizedBox( height: 20.0, ), Padding( padding: const EdgeInsets.symmetric( vertical: 16.0, horizontal: 32.0), // 移除内层Form child: Column( children: [ TextFormField( decoration: const InputDecoration( hintText: "Enter Username", labelText: "Username"), validator: (value) { if (value == null || value.isEmpty) { return "Username Cannot be Empty"; } return null; }, onChanged: (value) { name = value; setState(() {}); }, ), TextFormField( obscureText: true, decoration: const InputDecoration( hintText: "Enter Password", labelText: "Password"), validator: (value) { if (value == null || value.isEmpty) { return "Password Cannot be Empty"; } return null; }, ), const SizedBox( height: 40.0, ), Material( color: Colors.teal, borderRadius: BorderRadius.circular(changeButton ? 40 : 8), child: InkWell( onTap: () { moveToHome(context); }, child: AnimatedContainer( duration: const Duration(seconds: 1), height: 50, width: changeButton ? 50 : 150, alignment: Alignment.center, child: changeButton ? const Icon( Icons.done, color: Colors.white, ) : const Text( "Login", style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20, ), ), ), ), ) ], ), ) ], ), ), )); } }
内容的提问来源于stack exchange,提问作者Tahmeed Zamindar
相关产品推荐
相关产品推荐

