Flutter文本表单验证插件text_form_validator的使用
Flutter文本表单验证插件text_form_validator的使用
这个插件旨在帮助创建具有信息性的表单字段验证。
功能
FormValidator
类用于将验证函数链式调用在一起,以生成一个符合 TextFormField
等部件要求的验证函数。最终闭包使用 build
方法匹配表单字段验证属性所需类型 “String? Function(String?)
”。
开始使用
要使用此插件,在您的 pubspec.yaml
文件中添加 text_form_validator
包。
使用示例
import "package:text_form_validator/form_validator.dart";
// 基础用法:字段不能为空或为空
TextFormField(validator: FormValidator.required().build());
// 所有的错误消息无法自定义,每个验证器依次运行,因此最终用户的消息可以尽可能具体
TextFormField(validator: FormValidator
.notNull(nullError: "请输入一些内容!")
.notEmpty()
.isNumeric()
.build());
// 更复杂的验证可以在运行时添加
String customError = "数字必须是100的倍数!";
ValidationFn validator = FormValidator
.notNull(nullError: "请输入一些内容!")
.notEmpty()
.isNumeric()
// 如果它命中了自定义验证,则可以假定类型转换正确
.custom((p0) => (p0 == null || (num.parse(p0) % 100) != 0) ? customError : null)
.build();
TextFormField(validator: validator);
当前默认函数
以下是所有当前默认函数的列表。这些函数是为了帮助用户,可能不详尽,参见 FormValidator.custom
添加自定义函数。这里提供的描述简短,详见 utils/string_validation_functions.dart
中的完整细节。
默认函数列表
<code>notNull</code>
: 不等于 null<code>notEmpty</code>
: 不等于 “”<code>required</code>
: 组合<code>notNull</code>
和<code>notEmpty</code>
<code>isNumeric</code>
:<code>num.tryParse</code>
不为 null<code>isDateTime</code>
: 值可以格式化为日期(可以指定自定义格式)<code>equals</code>
:==
提供的值<code>notEquals</code>
:!=
提供的值<code>lengthGt</code>
:value.length >
提供的值<code>lengthGtEq</code>
:value.length >=
提供的值<code>lengthLt</code>
:value.length <
提供的值<code>lengthLtEq</code>
:value.length <=
提供的值<code>lengthEq</code>
:value.length ==
提供的值<code>inList</code>
: 值在提供的列表中<code>notInList</code>
: 值不在提供的列表中<code>matches</code>
: 值匹配提供的正则表达式模式<code>isAnEmail</code>
: 值匹配<code>StringValidationFunctions.emailRegExp</code>
模式
其他信息
函数链式调用的好处在于允许用户消息尽可能地定制。
对于 <code>StringValidationFunctions</code>
错误信息是逐行提供的。这允许像 <code>StringValidationFunctions.equals</code>
这样的错误,其中它指定了相等值的默认错误信息。
完整示例代码
import "package:flutter/material.dart";
import "package:text_form_validator/form_validator.dart";
/// 一个非常简单的例子,展示如何将 [FormValidator] 添加到 [TextFormField]
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: DemoPage(),
);
}
}
class DemoPage extends StatelessWidget {
const DemoPage({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: TextFormField(
validator: FormValidator.required().build(),
));
}
}
更多关于Flutter文本表单验证插件text_form_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter文本表单验证插件text_form_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用text_form_validator
插件进行文本表单验证的一个代码示例。这个插件提供了多种内置的验证规则,可以大大简化表单验证的过程。
首先,确保你已经在pubspec.yaml
文件中添加了text_form_validator
依赖:
dependencies:
flutter:
sdk: flutter
text_form_validator: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get
来获取依赖。
下面是一个完整的示例,展示了如何使用text_form_validator
进行基本的表单验证:
import 'package:flutter/material.dart';
import 'package:text_form_validator/text_form_validator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _formKey = GlobalKey<FormState>();
TextEditingController _nameController = TextEditingController();
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Validation Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
controller: _nameController,
decoration: InputDecoration(labelText: 'Name'),
validator: MultiValidator([
RequiredValidator(errorText: 'Name is required'),
MinLengthValidator(5, errorText: 'Name must be at least 5 characters long'),
]),
),
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
validator: MultiValidator([
RequiredValidator(errorText: 'Email is required'),
EmailValidator(errorText: 'Email is not valid'),
]),
),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: MultiValidator([
RequiredValidator(errorText: 'Password is required'),
MinLengthValidator(8, errorText: 'Password must be at least 8 characters long'),
]),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 如果验证通过,可以在这里处理表单提交
print('Form is valid');
// 例如,清除控制器内容
_nameController.clear();
_emailController.clear();
_passwordController.clear();
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
}
解释
- 依赖添加:确保在
pubspec.yaml
文件中添加了text_form_validator
依赖。 - 全局键:使用
GlobalKey<FormState>()
来管理表单的状态。 - 文本控制器:为每个文本字段创建一个
TextEditingController
,用于管理文本输入。 - 表单字段:使用
TextFormField
创建表单字段,并应用验证规则。这里使用了MultiValidator
来组合多个验证器。 - 提交按钮:在按钮的
onPressed
回调中调用_formKey.currentState!.validate()
来验证表单。如果验证通过,可以处理表单提交逻辑。 - 资源释放:在
dispose
方法中释放文本控制器,以避免内存泄漏。
这个示例展示了如何使用text_form_validator
插件进行基本的表单验证。你可以根据需要添加更多的验证规则或自定义验证逻辑。