如何执行文本字段的验证?

Question

我是颤振的新事物，我想对 TextField 进行某种验证。我想检查它是否为空，如果不是，邮件的形式是否正确。我正在为此苦苦挣扎，我不确定我是否应该改变我的主要类，该类StartPageStatefulWidget。此类包含重定向到带有TextField的新页面的按钮。在此字段中，我们输入电子邮件，然后单击按钮后，会进行一些http请求(当然是在验证之后)。我读到我需要将这个类与TextField更改为extends State的类.

例如，我发现：https://flutter.dev/docs/cookbook/forms/validation 但对我来说，奇怪的是，首先，我们创建Stateless的MyApp，然后我们重定向到扩展StatefulWidget的类，它不会产生任何内容，然后重定向到下一个extends State类。

制作它的最佳实践是什么？感谢您的任何帮助。

起始页

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:.../ui/pages/LoginPage.dart';
class StartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(60.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 150),
SizedBox(
height: 50.0,
),
Text(
'blabla',
style: TextStyle(fontSize: 60, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
Text(
'Wypożyczaj to, czego potrzebujesz',
style: TextStyle(fontSize: 23, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 70.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () {
Navigator.push(context,
new MaterialPageRoute(builder: (context) => LoginPage()));
},
child: Text('Zaloguj się',
style: TextStyle(fontSize: 30, color: Color(0xffffffff)),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF6FC76C),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 30.0,
),
OutlinedButton(
onPressed: null,
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(color: Colors.white),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
child: const Text("blabla",
style: TextStyle(
fontSize: 20,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
),
],
),
),
backgroundColor: const Color(0xFE1A5BFF),
);
}
}

和登录页面

import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:http/http.dart' as http;
class LoginPage extends StatelessWidget {
final String baseURL =
"....";
final emailController = TextEditingController();
bool emailValidate = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Zaloguj się"),
),
body: Container(
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 130),
SizedBox(
height: 30.0,
),
Text(
'Zaloguj lub zarejestruj się za pomocą adresu e-mail',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
TextField(
controller: emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Adres e-mail',
fillColor: Color(0xffdbdbdb),
filled: true,
errorText:
emailValidate ? 'Please enter a Username' : null)),
SizedBox(
height: 15.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () => moveToProperWindowBasedOnEmail(
emailController.text, context),
child: Text('blabla',
style: TextStyle(
fontSize: 30,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF2F45C6),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 35.0,
),
Text(
'Możesz też się zalogować za pomocą:',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 15.0,
),
SignInButton(
Buttons.Google,
text: "Sign up with Google",
onPressed: () {},
),
SignInButton(
Buttons.Facebook,
text: "Sign up with Facebook",
onPressed: () {},
)
],
),
),
backgroundColor: const Color(0xFEF2F7FD),
);
}
Future<void> moveToProperWindowBasedOnEmail(
String text, BuildContext context) async {
//validation
if (validation == 'false') {
....
}
}
}
}

Answer 1

下面是如何将文本表单字段与表单小部件和验证器一起使用的示例

import 'package:flutter/material.dart';
class AddUser extends StatefulWidget {
@override
_AddUserState createState() => _AddUserState();
}
class _AddUserState extends State<AddUser> {
TextEditingController id = TextEditingController();
TextEditingController name = TextEditingController();
TextEditingController lastName = TextEditingController();
TextEditingController age = TextEditingController();
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(8.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Graphql example',
style: TextStyle(fontSize: 22),
),
SizedBox(
height: 50,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: id,
decoration: InputDecoration(
hintText: 'ID',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: age,
decoration: InputDecoration(
hintText: 'Age',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: name,
decoration: InputDecoration(
hintText: 'FirstName',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: lastName,
decoration: InputDecoration(
hintText: 'LastName',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {}
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.black,
child: Text(
'Submit',
style: TextStyle(color: Colors.white, fontSize: 16),
))
],
),
),
),
),
),
);
}
}

Answer 2

当我阅读您的问题时，我意识到您需要对 Flutter Widget 类型有一个基本的了解。

那就是=>Stateful和Stateless小部件。

我建议您首先搜索这些。然后你就会很容易理解。否则，这些答案只会给你一条鱼，而不是教你如何钓鱼。

Answer 3

我建议您在该小部件中使用 Flutter 的新表单小部件，您可以传递多个文本表单字段小部件。

这些新小部件最好的部分是它们接受验证器密钥，您可以在其中编写特定文本字段的所有验证，并在验证通过时返回 false。

查看下面的表格以更好地理解

https://github.com/mrinaljain/flutter_shoping_cart/blob/master/lib/screens/edit_product_screen.dart

Answer 4

在 Flutter 中有两种类型的小部件。Stateless和Stateful.

1. 无状态小部件是那些您无法更改其状态的小部件。(您不想对这些小部件执行操作，或者您不对这些小部件执行任何操作)。例如：-Text小部件。
2. 有状态小部件是那些要更改其状态的小部件。(您可以对这些小部件执行任何操作)。例如：-ElevatedButton小部件。

表单验证的简单示例

您也可以在下面的链接中找到我的答案以进行TextField验证。

我关于文本字段验证的答案