Flutter表单验证插件super_validation的使用

使用

在 test_bloc.dart 文件中，你可以定义一个 SuperValidation 对象来处理字符串验证：

final SuperValidation validation = SuperValidation(validationFunc: (value) {
    if (value == null || value.isEmpty) {
      return '请输入一些文本';
    }
    return null;
});

对于整数或数字的验证，可以使用 SuperValidationInt 和 SuperValidationNum 类：

final SuperValidationInt intValidation = SuperValidationInt.minMax(
  min: 0,
  max: 10,
  minMessage: '最小值为0',
  maxMessage: '最大值为10',
);

final SuperValidationNum numValidation = SuperValidationNum.minMax(
  min: 0,
  max: 10,
  minMessage: '最小值为0',
  maxMessage: '最大值为10',
);

对于枚举类型的验证，可以使用 SuperValidationEnum 类：

enum TestEnum { one, two, three }

final SuperValidationEnum<TestEnum> enumValidation = SuperValidationEnum()
    ..validation = '请选择一个选项';

// 在 `test_page.dart` 文件中使用
DropDownEnumField<TestEnum>(
  superValidation: context.read<TestBloc>().enumValidation,
  items: TestEnumM.mapName,
  autovalidateMode: AutovalidateMode.always,
),

在 test_page.dart 文件中，你可以使用 TextFieldSuperValidation 来添加带有验证功能的文本字段：

TextFieldSuperValidation(
    superValidation: context.read<TestBloc>().validation,
    autovalidateMode: AutovalidateMode.onUserInteraction,
);

如果你想要自定义错误装饰图标或后缀，可以使用 TextFieldSuperValidationWithIcon：

TextFieldSuperValidationWithIcon(
      superValidation: superValidation,
      errorIcon: Icon(Icons.error, color: Colors.red, size: 20),
      errorSuffix: Icon(Icons.error, color: Colors.red, size: 20),
    );

你还可以强制设置验证文本：

validation.validate('验证文本');

设置文本字段的内容：

validation.text = event.text;

构建按钮时，可以使用 SuperValidationBuilder：

SuperValidationBuilder(
  superValidation: context.read<TestBloc>().validation,
  builder: (context, validation, isValid) {
    return TextButton(
        onPressed: isValid
            ? () {
                print('测试');
              }
            : null,
        child: Text('测试'));
});

使用 SuperValidationSimpleMultyBuilder 可以实现多个验证条件的按钮：

SuperValidationSimpleMultyBuilder(
  builder: (context, isValid) {
      return ElevatedButton(
          onPressed: isValid
              ? () {
                  print('按下');
              }
              : null,
          child: Text('验证'),
      );
  },
  superValidation: [
      context.read<TestBloc>().numberValidation,
      context.read<TestBloc>().stringValidation,
  ],
)

使用 SuperValidationMultyBuilder 可以实现多个验证条件的按钮，并且可以自定义验证文本：

SuperValidationMultyBuilder(
  builder: (context, validation, isValid) {
      return Text(
                    validation.isEmpty ? '有效' : validation.toString(),
                    style: TextStyle(
                      color: isValid ? Colors.green : Colors.red,
                    ),
                  );
      },
  superValidation: {
      'string': context.read<TestBloc>().stringValidation,
      'number': context.read<TestBloc>().numberValidation,
  },
)

如果需要自定义逻辑，可以在 bloc 中使用 SuperValidationStream：

final SuperValidationStream<String> superValidationStream =
    SuperValidationStream(
  superValidationMap: {
      'string': context.read<TestBloc>().stringValidation,
      'number': context.read<TestBloc>().numberValidation,
  },
);
superValidationStream.streamValidation.listen((event) {
    print('验证结果: $event');
});

自定义验证示例：

class SuperValidationFile extends SuperValidationA {
  SuperValidationFile() {
    validate();
  }

  void validate() {
    if (files.length != 2) {
      validation = '你需要添加两个文件';
    } else {
      validation = null;
    }
  }

  final StreamController<String?> _streamController = StreamController.broadcast();
  @override
  Stream<bool> get streamIsValid => _streamController.stream.map((event) => event == null);

  @override
  Stream<String?> get streamValidation => _streamController.stream;

  String? _validation;
  @override
  String? get validation => _validation;
  set validation(String? value) {
    _validation = value;
    _streamController.add(value);
  }

  List<FileManaged> _files = [];
  List<FileManaged> get files => [..._files];
  void addFile(FileManaged file) {
    _files.add(file);
    validate();
  }

  void removeFile(FileManaged file) {
    _files.remove(file);
    validate();
  }
}

使用 SuperValidationEnumBuilder 可以实现枚举类型的流构建器：

SuperValidationEnumBuilder<String>(
        superValidation: superValidation,
        builder: (context, value) {
          return ListView(
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            children: values
                .map((e) => CheckboxListTile(
                      title: Text(e),
                      value: value == e,
                      onChanged: (value) {
                        if (value == true) {
                          superValidation.value = e;
                        }
                      },
                    ))
                .toList(),
          );
        });

使用 SuperValidationTextFieldListener 可以实现枚举类型到文本字段的转换：

SuperValidationTextFieldListener<String>(
                  transformer: (val) => val,
                  readOnly: true,
                  superValidation:
                      context.read<TestBloc>().stringEnumValidation),