Flutter表单验证插件angel3_validate的使用
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
更多关于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'),
),
],
),
);
}
}
解释
- 依赖添加:在
pubspec.yaml
中添加angel3_validate
依赖。 - 初始化Validator:在
_MyFormState
的initState
方法中,初始化一个Validator
实例,并添加验证规则。例如,email
字段需要是有效的电子邮件地址,password
字段的最小长度为6。 - 表单构建:使用
Form
和TextFormField
构建一个简单的表单,包括email
和password
字段。 - Flutter内置验证:在每个
TextFormField
中添加validator
回调,用于处理Flutter内置的必填验证。 - 提交处理:在
_submit
方法中,首先使用Flutter内置的表单验证。如果通过,则使用angel3_validate
进行进一步的验证。如果验证通过,则显示提交成功信息;否则,显示验证错误信息。
请注意,这个示例结合了Flutter内置的表单验证和angel3_validate
插件的验证功能。你可以根据需要选择使用其中一种或结合使用。