用户登录

现在我们想在点按注册用户按钮的时候验证一下文本字段里的数据,比如如果文本字段里还没有值,可以在字段的下面显示一个提示。

在文本表单字段里面可以设置一个验证器,先在这个用户字段里,添加一个 validator,这个方法支持一个 value 参数,它的值就是当前字段里的值。

在这个方法里可以检查这个 value 的值,方法 return 的值如果是字符串,就是要在字段下面显示的警告内容。如果 return 的值是 null 就表示验证通过了。

在这个方法里面可以用 if 判断一下,如果 value 等于 null 或者 value.isEmpty,可以 return 一个字符串,请填写用户名。不然就让这个 validator 方法 return null,表示验证通过。

再找到密码字段,同样在里面添加一个 validator,方法接收一个 value 属性。在方法里面判断一下 value 等于 null 或者 value.isEmpty ,这种情况 return 的值是 请填写用户密码。

下面再判断一下,如果 value.isNotEmpty 并且 value.length 小于 6 ,return 的文字是 请设置6位以上的密码。不然就 return null ,表示验证通过。

在注册用户按钮的点按回调里面可以执行一下验证功能,找到这个方法,在里面可以用一下 nameFieldKey.currentState!.validate() ,这里在 currentState 后面加上 ! 号,表示我们确定这个东西不会是 null。下面再执行一下 passwordFieldKey.currentState!.validate() 这个方法验证密码字段。执行 validate() 这个方法就会执行这个 Key 对应的那个字段里设置的 validator() 方法验证字段的数据。

注意这个 validate() 方法会返回一个布尔值,也就是如果字段数据验证通过的话,方法就会返回 true,如果验证的时候出了问题,就会返回 false。

下面再测试一下,先什么也不填,直接按一下注册用户按钮,在用户字段下面会显示请填写用户名,在密码字段的下面会显示请填写用户密码。在用户字段里输入一个用户名,输入一个小于 6 位的密码,再按一下注册用户。

执行了密码字段里的 validator 方法以后,这次会在密码字段的下面显示请设置 6 位以上的密码,重新再设置一下密码,然后按一下注册用户。执行了 validator 以后,验证通过,这个验证器方法会返回 null,这样就不会显示警告了。

自动验证

除了执行这个 validate() 方法验证字段数据以外,我们还可以启用字段的自动验证功能,在这个 TextFormField 字段里面,添加一个 autovalidateMode 属性,选择一种自动验证模式,这里我们用一下 AutovalidateMode.onUserInteraction。复制一下这行代码,在另外一个字段的上面同样设置一下这个 autovalidateMode 属性。

然后编辑一下用户字段里的值,如果没有填写字段的值就会在字段下面显示请填写用户名,输入一个用户名,自动验证以后,通过了验证就不会再显示错误提示了。

验证文本表单字段数据:validate()《 Flutter 2:表单元素 》

统计

13432
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点