第五十八回： Form系列组件的验证与提交功能

talk_8

已于 2023-06-22 10:20:15 修改

阅读量605

点赞数

分类专栏：一起Talk Flutter吧文章标签： flutter Form TextFormField 验证Form数据的合法性

于 2023-06-17 22:44:39 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/131265685

版权

一起Talk Flutter吧专栏收录该内容

823 篇文章 19 订阅

订阅专栏

文章目录

概念介绍
使用方法
示例代码
经验分享

我们在上一章回中介绍了Form Widget相关的内容，本章回中将介绍 Form系列组件的验证与提交功能.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的的验证功能与提交功能是指对Form组件中的内容进行验证和提交，它不像TextField一样对单个组件进行验证同，而是对Form组件中的所有组件进行统一的验证与提交。这也是我们使用Form组件最大的优点。

使用方法

整体的思路：先在Form的子组件中实现验证方法和数据保存方法，也就是给子组件(通常是TextFormField组件)的validator和onSaved属性赋值；然后统一进行验证数据的合法性并且对数据进行保存，这个操作由FormState对象方来完成。

FormState是Form的State类，主要用来对Form中的所有FormField进行统一操作，比如保存数据的操作。我们可以通过Form.of()或者GlobalKey获取该类型的对象。该类型提供了相关的方法对数据进行统一操作，下面是这些方法的详细内容：

validate()方法：主要用来验证数据的合法性；
save()方法：主要用来保存数据；
reset()方法：主要用来重置数据；

示例代码

final formKey = GlobalKey<FormState>();
AutovalidateMode _autoValidate = AutovalidateMode.disabled;
String? _name = "Default Name";
String? _pwd = "Default Pwd";

//验证和提交和方法，虽然只验证和提交一次，但是它会回调Form中所有子组件的验证和提交方法。
//相当于一次对所有的输入内容进行了验证和提交。
void loginWithForm() {
  //合法性验证成功则保存数据,否则打开自动验证功能，这样在用户输入后会自动关闭错误提示，这种体验比较好
  if (formKey.currentState!.validate()) {
    // _autoValidate = AutovalidateMode.disabled;
    //它会回调TextFormFiled中的onSave方法
    formKey.currentState?.save();
  } else {
    setState(() {
      _autoValidate = AutovalidateMode.always;
    });
  }
  //它会回调validator对应的回方法，成功返回true,错误返回错误信息（在验证方法中），显示在helperText位置
  // formKey.currentState?.validate();
  debugPrint("login clicked");
}

上面的代码中我们主要演示了如何获取FormState对象，并且通过该对象来调用数据验证和保存方法。此外，该对象需要赋值给Form组件的key属性才有效果。详细内容可以参考上一章回中的示例代码，Form子组件中的数据验证和保存方法也在上一章回的示例代码中。

FormState对象不会自动去验证和保存数据，我们把该对象的操作封装成一个方法，也就是代码中的loginWithForm()方法，然后把该方法赋值给Button的onPress属性，最后把Button组件和Form组件放到同一页面上，点击Button时就会调用loginWithForm()方法去验证和保存Form组件中的数据，下面是Button的示例代码：

Container(
  width: double.infinity,
  height: 56.0,
  child: ElevatedButton(
    onPressed: () => loginWithForm(),
    child: Text("Login"),
  ),
),

经验分享

下面分享一些我在验证数据合法性方法的经验:

在Form组件的子组件TextFormField中不要打开自动验证功能(默认关闭），当验证错误时再打开自动验证功能，示例代码可以参考上一小节中loginWithForm()方法内SetState相关的代码。这样做的好处有以下几点：

只有主动点击按钮时才会验证数据的合法性；
如果打开自动验证会显示helpText中的内容，会让人以为是错误了；
在验证出错后再开启自动验证，输入正确后就会让helpText中的错误内容消失，因为Form中包含多个子组件，一个子组件的错误提示内容消失后不会影响其它子组件；下面是验证合法性的示例代码，请大家参考：

//返回有内容时会显示在help位置，而且边框颜色变成红色，返回为Null时不会显示出来
String? _validateName(String? n) {
  if (n!.isEmpty)
    return "name is empty";
  else
    return null;
}