Flutter JSON验证插件flutter

Flutter JSON验证插件flutter_ajv的使用

简介

flutter_ajv 是一个将 AJV.js 移植到 Dart 的库。它提供了强大的 JSON Schema 验证功能，可以帮助开发者在 Flutter 应用中进行复杂的 JSON 数据验证。

示例代码

import 'package:example/example.schema.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ajv/ajv_validator.dart';
import 'package:json_view/json_view.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ajvValidator = AJVValidator();
  var errorMap = {};
  Future<dynamic>? ajvFuture;

  @override
  void initState() {
    super.initState();
    ajvFuture = ajvValidator.setup();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: ajvFuture,
      builder: (context, snapshot) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('AJV Example'),
          ),
          body: Builder(
            builder: (context) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: Text('初始化中...'));
              }

              return SingleChildScrollView(
                child: Column(
                  children: [
                    const Text('模式'),
                    const JsonView(
                      json: exampleFormSchema,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                    ),
                    const Divider(),
                    const Text('数据'),
                    const JsonView(
                      json: exampleFormData,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                    ),
                    Builder(builder: (context) {
                      if (errorMap.isNotEmpty) {
                        return Column(
                          children: [
                            const Divider(),
                            const Text('验证结果'),
                            JsonView(
                              json: errorMap,
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                            ),
                          ],
                        );
                      }

                      return const Text('点击 "验证" 获取结果！');
                    }),
                  ],
                ),
              );
            },
          ),
          floatingActionButton: FloatingActionButton.extended(
            onPressed: () async {
              try {
                // 注册 JSON 模式
                ajvValidator.registerSchema(exampleFormSchema);

                // 验证数据
                final result = ajvValidator.validate(exampleFormData);
                final transformedError = result.keys.fold(
                  {},
                  (r, k) => {
                    ...r,
                    k: result[k]!.fold(
                      {},
                      (r1, e1) => {...r1, e1.keyword: e1.message},
                    )
                  },
                );

                // 更新错误信息
                setState(() {
                  errorMap = transformedError;
                });
              } catch (e) {
                print(e);
              }
            },
            tooltip: '验证',
            label: const Text('验证'),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      },
    );
  }
}

代码解释

导入必要的包

import 'package:example/example.schema.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ajv/ajv_validator.dart';
import 'package:json_view/json_view.dart';

主应用类

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

主页面状态类

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

主页面状态实现类

class _MyHomePageState extends State<MyHomePage> {
  final ajvValidator = AJVValidator();
  var errorMap = {};
  Future<dynamic>? ajvFuture;

  @override
  void initState() {
    super.initState();
    ajvFuture = ajvValidator.setup();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: ajvFuture,
      builder: (context, snapshot) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            title: const Text('AJV 示例'),
          ),
          body: Builder(
            builder: (context) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: Text('初始化中...'));
              }

              return SingleChildScrollView(
                child: Column(
                  children: [
                    const Text('模式'),
                    const JsonView(
                      json: exampleFormSchema,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                    ),
                    const Divider(),
                    const Text('数据'),
                    const JsonView(
                      json: exampleFormData,
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),
                    ),
                    Builder(builder: (context) {
                      if (errorMap.isNotEmpty) {
                        return Column(
                          children: [
                            const Divider(),
                            const Text('验证结果'),
                            JsonView(
                              json: errorMap,
                              shrinkWrap: true,
                              physics: const NeverScrollableScrollPhysics(),
                            ),
                          ],
                        );
                      }

                      return const Text('点击 "验证" 获取结果！');
                    }),
                  ],
                ),
              );
            },
          ),
          floatingActionButton: FloatingActionButton.extended(
            onPressed: () async {
              try {
                // 注册 JSON 模式
                ajvValidator.registerSchema(exampleFormSchema);

                // 验证数据
                final result = ajvValidator.validate(exampleFormData);
                final transformedError = result.keys.fold(
                  {},
                  (r, k) => {
                    ...r,
                    k: result[k]!.fold(
                      {},
                      (r1, e1) => {...r1, e1.keyword: e1.message},
                    )
                  },
                );

                // 更新错误信息
                setState(() {
                  errorMap = transformedError;
                });
              } catch (e) {
                print(e);
              }
            },
            tooltip: '验证',
            label: const Text('验证'),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      },
    );
  }
}

更多关于Flutter JSON验证插件flutter_ajv的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼

更多关于Flutter JSON验证插件flutter_ajv的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_ajv 是一个用于在 Flutter 应用中验证 JSON 数据的插件，它基于 Ajv (Another JSON Schema Validator) 库。Ajv 是一个功能强大且灵活的 JSON 模式验证器，支持多种 JSON Schema 版本（Draft-04, Draft-06, Draft-07, Draft-2019-09, Draft-2020-12 等）。

安装 `flutter_ajv`

首先，你需要在 pubspec.yaml 文件中添加 flutter_ajv 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_ajv: ^0.1.0

然后运行 flutter pub get 来安装依赖。

使用 `flutter_ajv`

1. 导入库

在需要使用 flutter_ajv 的 Dart 文件中导入库：

import 'package:flutter_ajv/flutter_ajv.dart';

2. 创建 Ajv 实例

你可以通过 Ajv() 构造函数创建一个 Ajv 实例。你可以选择性地传递配置选项来定制验证器的行为。

final ajv = Ajv();

3. 定义 JSON Schema

JSON Schema 用于描述 JSON 数据的结构。你需要定义一个 JSON Schema 来验证你的 JSON 数据。

final schema = {
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "age": {"type": "integer", "minimum": 18}
  },
  "required": ["name", "age"]
};

4. 验证 JSON 数据

使用 ajv.validate 方法来验证 JSON 数据是否符合指定的 JSON Schema。

final jsonData = {
  "name": "John Doe",
  "age": 25
};

final isValid = ajv.validate(schema, jsonData);
if (isValid) {
  print('JSON data is valid.');
} else {
  print('JSON data is invalid: ${ajv.errorsText()}');
}

如果 JSON 数据不符合 Schema，ajv.validate 将返回 false，并且你可以通过 ajv.errorsText() 获取详细的错误信息。

5. 自定义错误处理

你可以通过传递一个回调函数来处理验证错误：

ajv.validate(schema, jsonData, onError: (errors) {
  print('Validation errors: $errors');
});

示例

以下是一个完整的示例，展示了如何使用 flutter_ajv 来验证 JSON 数据：

import 'package:flutter/material.dart';
import 'package:flutter_ajv/flutter_ajv.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: JsonValidator(),
    );
  }
}

class JsonValidator extends StatelessWidget {
  final ajv = Ajv();

  void validateJson() {
    final schema = {
      "type": "object",
      "properties": {
        "name": {"type": "string"},
        "age": {"type": "integer", "minimum": 18}
      },
      "required": ["name", "age"]
    };

    final jsonData = {
      "name": "John Doe",
      "age": 17
    };

    final isValid = ajv.validate(schema, jsonData);
    if (isValid) {
      print('JSON data is valid.');
    } else {
      print('JSON data is invalid: ${ajv.errorsText()}');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('JSON Validator'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: validateJson,
          child: Text('Validate JSON'),
        ),
      ),
    );
  }
}

Flutter JSON验证插件flutter_ajv的使用