6.3 表单输入有效验证

6.3 表单输入有效验证

实现步骤：

第 1 步：安装插件 validatorless

1
flutter pub add validatorless

使用

1
2
3
4
5
6
7
8
9
10
TextFormField(
  decoration: InputDecoration(
    labelText: 'User e-mail',
  ),
  // 加在这里，可传入多个检查
  validator: Validatorless.multiple([
     Validatorless.email('The field must be an email'),
     Validatorless.required('The field is obligatory')
  ]),
)

检查函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 必须输入
Validatorless.required(String)
// 是否email
Validatorless.email(String)
// 最小长度
Validatorless.min(int, String)
// 最大长度
Validatorless.max(int, String)
// 值区间
Validatorless.between(int, int, String)
// 数字
Validatorless.number(String)
// cpf
Validatorless.cpf(String)
// cnpj
Validatorless.cnpj(String)
// 日期格式
Validatorless.date(String)
// 比较
Validatorless.compare(TextEditingController, String)

第 2 步： i18n 多语言

lib/common/i18n/locale_keys.dart

1
2
3
4
5
6
// 验证提示
static const validatorRequired = 'validator_required';
static const validatorEmail = 'validator_email';
static const validatorMin = 'validator_min';
static const validatorMax = 'validator_max';
static const validatorPassword = 'validator_password';

lib/common/i18n/locales/locale_en.dart

1
2
3
4
5
6
7
// 验证提示
LocaleKeys.validatorRequired: 'The field is obligatory',
LocaleKeys.validatorEmail: 'The field must be an email',
LocaleKeys.validatorMin: 'Length cannot be less than @size',
LocaleKeys.validatorMax: 'Length cannot be greater than @size',
LocaleKeys.validatorPassword:
    'password must have between @min and @max digits',

lib/common/i18n/locales/locale_zh.dart

1
2
3
4
5
6
// 验证提示
LocaleKeys.validatorRequired: '字段不能为空',
LocaleKeys.validatorEmail: '请输入 email 格式',
LocaleKeys.validatorMin: '长度不能小于 @size',
LocaleKeys.validatorMax: '长度不能大于 @size',
LocaleKeys.validatorPassword: '密码长度必须 大于 @min 小于 @max',

第 3 步：加入验证功能

lib/pages/system/register/controller.dart

1
GlobalKey formKey = GlobalKey<FormState>();

通过 GlobalKey 的方式管理 Form 表单子项的验证功能

1
2
3
4
5
6
7
8
9
// 注册
void onSignUp() {
  if ((formKey.currentState as FormState).validate()) {
    // 验证通过提交数据
  }
}

// 登录
void onSignIn() {}

lib/pages/system/register/view.dart

1
2
3
4
5
// 表单页
Widget _buildForm() {
  return Form(
    key: controller.formKey, // 设置globalKey，用于后面获取FormState
    autovalidateMode: AutovalidateMode.onUserInteraction,// 自动校验类型

autovalidateMode 可以设置验证方式， onUserInteraction 是用户输入操作后提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// username
TextFormWidget(
  autofocus: true,
  controller: controller.userNameController,
  labelText: LocaleKeys.registerFormName.tr,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
    Validatorless.min(
        3, LocaleKeys.validatorMin.trParams({"size": "3"})),
    Validatorless.max(
        20, LocaleKeys.validatorMax.trParams({"size": "20"})),
  ]),
),

// email
TextFormWidget(
  autofocus: true,
  keyboardType: TextInputType.emailAddress,
  controller: controller.emailController,
  labelText: LocaleKeys.registerFormEmail.tr,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
    Validatorless.email(LocaleKeys.validatorEmail.tr),
  ]),
),

// first name
TextFormWidget(
  autofocus: true,
  controller: controller.firstNameController,
  labelText: LocaleKeys.registerFormFirstName.tr,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
    Validatorless.min(
        3, LocaleKeys.validatorMin.trParams({"size": "3"})),
    Validatorless.max(
        20, LocaleKeys.validatorMax.trParams({"size": "20"})),
  ]),
),

// last name
TextFormWidget(
  autofocus: true,
  controller: controller.lastNameController,
  labelText: LocaleKeys.registerFormLastName.tr,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
    Validatorless.min(
        3, LocaleKeys.validatorMin.trParams({"size": "3"})),
    Validatorless.max(
        20, LocaleKeys.validatorMax.trParams({"size": "20"})),
  ]),
),

// password
TextFormWidget(
  controller: controller.pwdController,
  labelText: LocaleKeys.registerFormPassword.tr,
  isObscure: true,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
  ]),
).paddingBottom(50),

validator 是 Form 检查调用的函数

第 4 步：自己实现验证函数

自己实现验证规则是必须的，现在来自己写一个 密码 的验证

lib/common/utils/validators.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
import 'package:flutter/material.dart';

/// 表单验证
class Validators {
  /// Validatorless.password(6, 20, 'password must have between 6 and 20 digits')
  static FormFieldValidator<String> password(int min, int max, String m) =>
      (v) {
        if (v?.isEmpty ?? true) return null;
        if ((v?.length ?? 0) < min) return m;
        if ((v?.length ?? 0) > max) return m;
        return null;
      };
}

lib/pages/system/register/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// password
TextFormWidget(
  controller: controller.pwdController,
  labelText: LocaleKeys.registerFormPassword.tr,
  isObscure: true,
  validator: Validatorless.multiple([
    Validatorless.required(LocaleKeys.validatorRequired.tr),
    Validators.password(
      8,
      18,
      LocaleKeys.validatorPassword.trParams(
        {"min": "8", "max": "18"},
      ),
    ),
  ]),
).paddingBottom(50),

最后：运行

img

提交代码到 git