Flutter表单验证插件angel3_validate的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter表单验证插件angel3_validate的使用

angel3_validate 是一个基于 matcher 库的验证库,适用于Angel3框架。它可以在服务器端和客户端运行,因此相同的验证规则可以应用于前后端的表单。

以下是关于如何在Flutter项目中使用 angel3_validate 的详细示例和说明。

安装

首先,在您的 pubspec.yaml 文件中添加依赖:

dependencies:
  angel3_validate: ^latest_version

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

示例代码

创建Validator

您可以创建一个 Validator 对象,并为其指定验证规则:

import 'package:angel3_validate/angel3_validate.dart';

void main() {
  var validator = Validator({
    'username': isAlphaNum,
    'multiple,keys,with,same,rules': [isString, isNotEmpty],
    'balance': [
      greaterThanOrEqualTo(0),
      lessThan(1000000)
    ],
    'nested': [
      foo,
      [bar, baz]
    ]
  });
}

验证数据

使用 validator.check 方法来验证数据:

void main() {
  var result = validator.check(formData);

  if (!result.errors.isNotEmpty) {
    // 数据无效
  } else {
    // 安全处理过滤后的数据
    return someSecureOperation(result.data);
  }
}

您也可以使用 enforce 方法强制执行验证规则:

void main() {
  try {
    var safeData = validator.enforce(formData);
  } on ValidationException catch(e) {
    print(e.errors);
  }
}

必填字段

通过在字段名称后加上 * 来标记必填字段:

void main() {
  var validator = Validator({
    'googleId*': isString,
    
    // 或者使用 requireField
    requireField('googleId'): isString,
  });
}

禁止字段

通过在字段名称后加上 ! 来禁止某些字段出现在有效数据中:

void main() {
  var validator = Validator({
    'forbiddenField!': isString,
  });
}

默认值

如果字段未提供,默认值将在验证之前填充:

final Validator todo = Validator({
  'text*': isString,
  'completed*': isBool
}, defaultValues: {
  'completed': false
});

自定义验证函数

您可以传递一个同步返回布尔值的函数作为验证规则:

void main() {
  var validator = Validator({
    'key*': (key) {
      var file = File('whitelist.txt');
      return file.readFileSync().contains(key);
    }
  });
}

自定义错误消息

您可以为特定字段设置自定义错误消息:

Validator({
  'age': [greaterThanOrEqualTo(18)]
}, customErrorMessages: {
  'age': 'You must be an adult to see this page.'
});

自动解析

对于需要验证为数字但以字符串形式传入的字段,可以使用 autoParse 方法进行自动转换:

void main() {
  var parsed = autoParse({
    'age': '34',
    'weight': '135.6'
  }, ['age', 'weight']);

  validator.enforce(parsed);
}

过滤

filter 函数可以帮助提取 Map 中所需的键:

var inputData = {'foo': 'bar', 'a': 'b', '1': 2};
var only = filter(inputData, ['foo']);

print(only); // { foo: bar }

嵌套验证器

当数据结构嵌套时,可以使用嵌套验证器:

void main() {
  var bio = Validator({
    'age*': [isInt, greaterThanOrEqualTo(0)],
    'birthYear*': isInt,
    'countryOfOrigin': isString
  });

  var book = Validator({
    'title*': isString,
    'year*': [
      isNum,
      (year) {
        return year <= DateTime.now().year;
      }
    ]
  });

  var author = Validator({
    'bio*': bio,
    'books*': [isList, everyElement(book)]
  }, defaultValues: {
    'books': []
  });
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用angel3_validate插件进行表单验证的代码示例。这个插件提供了一套简洁的API,用于对Flutter中的表单输入进行验证。

首先,确保你已经在pubspec.yaml文件中添加了angel3_validate依赖:

dependencies:
  flutter:
    sdk: flutter
  angel3_validate: ^x.y.z  # 请替换为最新版本号

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

接下来,是一个完整的示例,展示了如何使用angel3_validate进行表单验证:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Validation with angel3_validate'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  late Validator _validator;
  String _email = '';
  String _password = '';

  @override
  void initState() {
    super.initState();
    _validator = Validator();
    _validator.add('email', Validators.email());
    _validator.add('password', Validators.minLength(6));
  }

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      var errors = _validator.validate({
        'email': _email,
        'password': _password,
      });

      if (errors.isEmpty) {
        // 提交表单数据
        print('Form submitted successfully');
      } else {
        // 显示验证错误
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Validation errors: $errors'),
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Email is required';
              }
              return null;
            },
            onSaved: (value) {
              _email = value!;
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Password is required';
              }
              return null;
            },
            onSaved: (value) {
              _password = value!;
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _submit,
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml中添加angel3_validate依赖。
  2. 初始化Validator:在_MyFormStateinitState方法中,初始化一个Validator实例,并添加验证规则。例如,email字段需要是有效的电子邮件地址,password字段的最小长度为6。
  3. 表单构建:使用FormTextFormField构建一个简单的表单,包括emailpassword字段。
  4. Flutter内置验证:在每个TextFormField中添加validator回调,用于处理Flutter内置的必填验证。
  5. 提交处理:在_submit方法中,首先使用Flutter内置的表单验证。如果通过,则使用angel3_validate进行进一步的验证。如果验证通过,则显示提交成功信息;否则,显示验证错误信息。

请注意,这个示例结合了Flutter内置的表单验证和angel3_validate插件的验证功能。你可以根据需要选择使用其中一种或结合使用。

回到顶部