多个form 验证_Flutter中创建一个带验证的表单

Flutter中创建一个带验证的表单

原文 供参考

App中经常需要用户来输入信息,比如在登录界面输入邮箱地址和密码. 为了确保应用的安全和便捷,我们需要对用户的输入进行校验. 如果用户输入信息正确,我们可以继续后续流程.如果用户输入有误, 我们可以展示一个友好的提示信息来提示用户.

如下例子中展示了如何对一个文本输入进行校验

步骤

1. 创建一个 Form表单 并指定GlobalKey全局标识
2. 添加一个 TextFormField 文本框,并附上校验逻辑
3. 创建一个按钮来校验表单,并进行提交

1. 创建一个 Form表单 并指定GlobalKey全局标识

首先我们需要创建一个 Form 组件. 该组件作为一个容器会校验多个表单域.

当我们创建表单时, 我们需要指定一个GlobalKey. 通过它可以唯一确定一个 Form 组件, 同时允许我们在后续步骤中校验表单.

代码如下

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

// Define a corresponding State class. This class will hold the data related to
// the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that will uni