Flutter表单验证插件flutter_validator的使用
Flutter表单验证插件flutter_validator的使用
flutter_validator
flutter_validator 是一个用于在 Flutter 中进行表单字段验证的插件。它支持在每个验证步骤中使用不同的消息。
开始使用
flutter_validator 设计简单且易于组合。你可以将验证器传递给表单字段的 validator 字段，像这样：
class ExampleForm extends StatefulWidget {
const ExampleForm({super.key});
[@override](/user/override)
State<ExampleForm> createState() => _ExampleFormState();
}
class _ExampleFormState extends State<ExampleForm> {
final _key = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Form(
key: _key, // 给表单添加一个全局键
child: Column(
children: [
TextFormField(
validator: const Validator().isNotEmpty(message: "Required!"), // 使用基本验证器
),
ElevatedButton(
onPressed: () => _key.currentState?.validate(), // 验证表单
child: Text("提交"), // 按钮文本
),
],
),
);
}
}
通过这种方式，你已经确保了该字段不能为空。
虽然你可以直接使用这些基本验证器，但真正的魔力在于当你用它们来构建应用程序自己的、更复杂的验证器时：
import 'package:flutter_validator/flutter_validator.dart';
extension AppValidator on Validator {
Validator isPassword() {
return copy()
.isNotEmpty(
message: "此字段不能为空！", // 字段为空时的错误信息
)
.minLength(
6,
message: "密码长度至少为6个字符！", // 密码长度至少为6个字符时的错误信息
)
.maxLength(
20,
message: "密码长度最多为20个字符！", // 密码长度最多为20个字符时的错误信息
)
.matches(
RegExp(r"^[a-zA-Z0-9]+$"), // 正则表达式，匹配字母和数字
message: "密码只能包含字母和数字！", // 匹配失败时的错误信息
);
}
}
以上代码定义了一个名为 isPassword 的扩展方法，用于验证密码是否符合特定规则。
示例代码
以下是一个完整的示例，展示了如何使用 flutter_validator 插件进行各种表单验证：
import 'package:flutter/material.dart';
import 'forms/contains_form.dart';
import 'forms/equals_form.dart';
import 'forms/has_no_whitespace_form.dart';
import 'forms/is_alphabetical_form.dart';
import 'forms/is_alphanumerical_form.dart';
import 'forms/is_lower_case_form.dart';
import 'forms/is_not_empty_form.dart';
import 'forms/is_numerical_form.dart';
import 'forms/is_upper_case_form.dart';
import 'forms/matches_form.dart';
import 'forms/max_length_form.dart';
import 'forms/min_length_form.dart';
import 'forms/not_equals_form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
final color1 = const Color(0xFFF0F0F0);
final color2 = const Color(0xFFE0E0E0);
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [
ExpansionTile(
title: const Text("Validator.equals()"),
subtitle: const Text(
"当两个值相等时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [EqualsForm()],
),
ExpansionTile(
title: const Text("Validator.notEquals()"),
subtitle: const Text(
"当两个值不相等时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [NotEqualsForm()],
),
ExpansionTile(
title: const Text("Validator.contains()"),
subtitle: const Text(
"当一个值包含子字符串时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [ContainsForm()],
),
ExpansionTile(
title: const Text("Validator.matches()"),
subtitle: const Text(
"当一个值与正则表达式匹配时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [MatchesForm()],
),
ExpansionTile(
title: const Text("Validator.isNotEmpty()"),
subtitle: const Text(
"当一个值不是空字符串时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [IsNotEmptyForm()],
),
ExpansionTile(
title: const Text("Validator.hasNoWhitespace()"),
subtitle: const Text(
"当一个值没有空白字符时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [HasNoWhitespaceForm()],
),
ExpansionTile(
title: const Text("Validator.minLength(...)"),
subtitle: const Text(
"当一个值至少有N个字符时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [MinLengthForm()],
),
ExpansionTile(
title: const Text("Validator.maxLength(...)"),
subtitle: const Text(
"当一个值最多有N个字符时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [MaxLengthForm()],
),
ExpansionTile(
title: const Text("Validator.isUpperCase(...)"),
subtitle: const Text(
"当一个值全部为大写字母时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [IsUpperCaseForm()],
),
ExpansionTile(
title: const Text("Validator.isLowerCase(...)"),
subtitle: const Text(
"当一个值全部为小写字母时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [IsLowerCaseForm()],
),
ExpansionTile(
title: const Text("Validator.isNumerical(...)"),
subtitle: const Text(
"当一个值只包含数字时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [IsNumericalForm()],
),
ExpansionTile(
title: const Text("Validator.isAlphabetical(...)"),
subtitle: const Text(
"当一个值只包含字母时使用。",
),
backgroundColor: color2,
collapsedBackgroundColor: color2,
children: const [IsAlphabeticalForm()],
),
ExpansionTile(
title: const Text("Validator.isAlphanumerical(...)"),
subtitle: const Text(
"当一个值只包含字母或数字时使用。",
),
backgroundColor: color1,
collapsedBackgroundColor: color1,
children: const [IsAlphanumericalForm()],
),
],
),
),
);
}
}
更多关于Flutter表单验证插件flutter_validator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter表单验证插件flutter_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用flutter_validator插件进行表单验证的示例代码。flutter_validator是一个用于Flutter的表单验证库，可以方便地处理各种表单验证逻辑。
首先，确保你已经在pubspec.yaml文件中添加了flutter_validator依赖：
dependencies:
flutter:
sdk: flutter
flutter_validator: ^3.0.1 # 请检查最新版本号
然后运行flutter pub get来安装依赖。
以下是一个完整的示例代码，展示了如何使用flutter_validator进行表单验证：
import 'package:flutter/material.dart';
import 'package:flutter_validator/flutter_validator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Validator 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>();
final _validator = FBValidator();
String _email = '';
String _password = '';
@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(
decoration: InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value.isEmpty) {
return 'Email is required';
}
return _validator.validateEmail(value).error;
},
onChanged: (value) {
setState(() {
_email = value;
});
},
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Password is required';
}
if (value.length < 6) {
return 'Password must be at least 6 characters long';
}
return null;
},
onChanged: (value) {
setState(() {
_password = value;
});
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () async {
if (_formKey.currentState!.validate()) {
// Perform additional validation using flutter_validator
final result = await _validator.validateMulti([
_validator.validateEmail(_email),
_validator.validateLength(_password, min: 6),
]);
if (result.isValid) {
// If all validations pass, submit the form
print('Form submitted successfully');
// Handle form submission here
} else {
// If any validation fails, show the errors
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(result.firstError!),
),
);
}
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
在这个示例中，我们创建了一个包含两个文本字段（Email和密码）的简单表单。我们使用Flutter内置的表单验证功能（Form和TextFormField的validator属性）来处理基本的非空验证和长度验证。
此外，我们还使用了flutter_validator插件来进行更复杂的验证，比如Email格式验证。_validator.validateEmail(_email)方法用于验证Email字段，_validator.validateLength(_password, min: 6)方法用于验证密码的最小长度。
在提交按钮的onPressed回调中，我们首先使用Flutter内置的验证功能来检查所有字段是否通过初步验证。如果通过，我们再使用flutter_validator进行额外的验证。如果所有验证都通过，则执行表单提交逻辑；否则，显示第一个错误信息。
请注意，flutter_validator的API可能会随着版本的更新而变化，因此请参考最新的官方文档以确保代码的正确性。
