用户登录

在表单字段里面可以添加验证器,用它来验证用户在表单字段里面填写的值,如果不符合某些特定的规则,在表单字段下面会显示错误提示 .. 在这个表单的 Username 这个字段里面,可以给它添加一个 validator .. 验证表单数据的时候会调用字段的 validator .. 用一下 validateUsername .. 一会儿在上面再去定义这个方法 ..

同样在下面这个 Password 字段里面,也给它添加一个 validator .. 用一下 validatePassword ..

在这个类里面,找个地方再去定义一下这两个 validator 方法 .. 方法 return 的是 String .. 名字是 validateUsername .. 接收一个 value 参数 .. 它表示的就是字段里面的值 ..

在这个验证方法里面,如果字段的值不符合某些规定,可以让这个方法返回错误提示信息 .. 如果验证没有问题,直接返回 null 就行了 ..

里面先用一个 if ... 简单的判断一下 value 的值,是不是空 .. 用一个 isEmpty ... 如果是 .. 就 return 一条信息 .. Username is required. ... 不然的话,让这个方法返回 null ..

再复制一份 .. 修改一下方法的名字 .. validatePassword .. 同样检查一下字段的值是不是空白 .. 是的话,就 return Password is required 这个错误信息 .. 验证通过就让验证方法 return null ..

下面再找到点按提交按钮的回调 .. 在这个方法里面,可以用一下 registerFormKey.currentState 上面的 validate 这个方法 ... 执行一下验证 ..

验证通过这个 validate 会返回 true .. 验证失败会返回 false ..

再到模拟器上试一下 .. 去掉在字段里面输入的东西 ..

直接提交一下表单,会执行验证 .. 验证失败会在表单字段的下面出现错误提示 .. 这个错误信息会出现在字段的帮助信息位置上 .. 我们可以在字段的 InputDecoration 里面 .. 添加一个空白的 helperText .. 这样出现这些错误信息的时候会更自然一些 ..

先 Hot restart 一下 ..

然后在模拟器上再去试试 .. 提交表单 .. 会出现错误信息 .. 输入用户名 .. 密码 ... 重新再提交一下表单 ..

验证通过 .. 就不会出现刚才的错误信息了 ..

Form:验证表单里的数据《 Flutter 移动应用:表单 》

统计

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

社会化网络

关于

微信订阅号

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