Flutter表单验证插件vformfield的使用
Flutter表单验证插件vformfield的使用
验证规则（Validation Rules for Form Fields）
vformfield 插件提供了多种验证规则，可用于 Flutter 应用程序中的表单字段验证。
入门指南（Getting Started）
要使用此插件，请在 pubspec.yaml 文件中添加 vformfield 作为依赖项。
dependencies:
vformfield: ^版本号
使用说明（Usage）
创建用户名表单字段（create username VFormField）
以下是一个简单的示例，展示如何创建带有验证规则的用户名字段。
class UserName extends VFormField<String> {
UserName({required super.value}) : super();
}
PasswordText passwordText = PasswordText(
value: '',
rulebuilder: () => [
NotEmptyRule(), // 必填规则
RegExRule(
builder: (generator) => generator
.contains('@') // 包含 '@'
.endsWith([".ly", ".com"]) // 以 `.ly` 或 `.com` 结尾
.maxLength(15) // 最大长度为 15
.minLength(5), // 最小长度为 5
errorRegex: 'error'), // 错误信息
],
);
UserName usernameText = UserName(
value: '',
rulebuilder: () => [
NotEmptyRule(), // 必填规则
RegExRule(
builder: (generator) => generator
.contains('@') // 包含 '@'
.endsWith([".ly", ".com"]) // 以 `.ly` 或 `.com` 结尾
.maxLength(15) // 最大长度为 15
.minLength(5), // 最小长度为 5
errorRegex: 'error'), // 错误信息
],
);
自定义验证正则表达式模式（Custom validation regular expression patterns）
可以使用自定义正则表达式来实现更复杂的验证逻辑。
usernameText.addRule(
RegExRule(
builder: (generator) => generator.contains('@')
.endsWith([".ly", ".com"])
.maxLength(15)
.minLength(5),
errorRegex: '请输入有效的电子邮件地址'),
).addRule(
RegExRule(
pattern: r'^[0-9]{8}$', // 示例规则
errorRegex: '请输入有效的电话号码'),
).addRule(
RegExRule(
pattern: r'^[a-zA-Z]{5}$', // 示例规则
errorRegex: '请输入有效的字母组合'),
);
使用正则表达式模式（Use regular expression patterns）
以下示例展示了如何使用正则表达式模式进行表单验证。
phoneNumberText.addRule(RegExRule(
builder: (generator) => generator.addGroup(
builder: (group) => group.startsWith("00218")
.flowingBy([92, 91], count: 2) // 流动范围
.addRange(0, 9, count: 7)), // 数字范围
maxLength: 14,
errorRegex: '无效的电话号码'),
).addRule(
RegExRule(
pattern: r'^[a-zA-Z]{5}$', // 示例规则
errorRegex: '请输入有效的字母组合'),
);
TextFormField(
obscureText: phoneNumberText.obscureText,
validator: phoneNumberText.validator,
initialValue: "",
onChanged: (value) {
phoneNumberText.validator(value);
setState(() {});
},
decoration: InputDecoration(
labelText: 'Phone Number',
errorText: phoneNumberText.errorMessage,
),
),
使用 Builder（Use Builder）
可以通过 Builder 包裹表单字段，动态更新其状态。
passwordText.builder(
builder: (context, value, message, obscure) => TextFormField(
obscureText: passwordText.obscureText,
validator: passwordText.validator,
initialValue: value,
onChanged: (value) {
passwordText.validator(value);
},
decoration: InputDecoration(
labelText: 'Password',
errorText: passwordText.errorMessage,
suffixIcon: IconButton(
icon: Icon(
passwordText.obscureText
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: () {
passwordText.setobscures();
},
),
),
),
),
创建自定义验证规则（Create Custom validation rules）
可以通过继承 ValidationRule 类来自定义验证规则。
class CustomRule<T> extends ValidationRule<T> {
CustomRule()
: super(
validator: (value) {
if (value == null || value.isEmpty) {
return '值不能为空';
}
// 自定义验证逻辑
return null;
},
errorMessage: '值无效',
);
}
完整示例代码
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:vformfield/scr/validation_rule.dart';
import 'package:vformfield/vformfield.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'VFormField',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'VFormField'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PasswordText passwordText;
late UserName usernameText;
late List<VFormField> form;
[@override](/user/override)
void initState() {
passwordText = PasswordText(
value: 'Init Password',
rulebuilder: () => [
RegExRule(pattern: r'^[0-9]+$', errorRegex: '仅允许数字'),
],
);
usernameText = UserName(
value: 'init USer Name',
rulebuilder: () => [
NotEmptyRule(),
RegExRule(
builder: (generator) => generator
.contains('@')
.endsWith([".ly", ".com"])
.maxLength(15)
.minLength(5),
errorRegex: '错误'),
],
);
super.initState();
}
[@override](/user/override)
void dispose() {
usernameText.dispose();
passwordText.dispose();
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('VFormField'),
usernameText.builder(
builder: (context, value, message, obscure) => TextFormField(
obscureText: usernameText.obscureText,
validator: usernameText.validator,
initialValue: value,
onChanged: (value) {
usernameText.validator(value);
},
decoration: InputDecoration(
labelText: '用户名',
errorText: usernameText.errorMessage,
),
),
),
passwordText.builder(
builder: (context, value, message, obscure) => TextFormField(
obscureText: passwordText.obscureText,
validator: passwordText.validator,
initialValue: value,
onChanged: (value) {
passwordText.validator(value);
},
decoration: InputDecoration(
labelText: '密码',
errorText: passwordText.errorMessage,
suffixIcon: IconButton(
icon: Icon(
passwordText.obscureText
? Icons.visibility
: Icons.visibility_off,
color: Theme.of(context).primaryColorDark,
),
onPressed: () {
passwordText.setobscures();
},
),
),
),
),
ElevatedButton(
onPressed: () {
for (var field in form) {
if (!field.status) {
log("错误");
setState(() {});
return;
}
}
log("提交数据");
},
child: const Text("提交"),
),
],
),
),
);
}
}
class PasswordText extends VFormField<String> {
PasswordText({required super.value, required super.rulebuilder}) : super();
}
class UserName extends VFormField<String> {
UserName({required super.value, required super.rulebuilder}) : super();
}
class CustomRule extends ValidationRule<String> {
String? errormessage;
CustomRule({this.errormessage})
: super(
validator: (value) {
if (value == null || value.isEmpty) {
return errormessage ?? '值不能为空';
}
// 自定义验证逻辑
return null;
},
);
}
更多关于Flutter表单验证插件vformfield的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter表单验证插件vformfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
VFormField 是一个用于 Flutter 表单验证的插件，它可以帮助开发者更方便地处理表单输入和验证。以下是如何使用 VFormField 的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 vformfield 插件的依赖：
dependencies:
flutter:
sdk: flutter
vformfield: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 vformfield 包：
import 'package:vformfield/vformfield.dart';
3. 使用 VFormField
VFormField 可以用于各种表单字段，如文本输入、选择框等。以下是一个简单的示例，展示如何使用 VFormField 进行文本输入验证：
import 'package:flutter/material.dart';
import 'package:vformfield/vformfield.dart';
class MyForm extends StatefulWidget {
[@override](/user/override)
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('VFormField Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
VFormField(
labelText: 'Username',
validator: (value) {
if (value.isEmpty) {
return 'Please enter your username';
}
return null;
},
),
SizedBox(height: 20),
VFormField(
labelText: 'Password',
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must be at least 6 characters';
}
return null;
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
// 表单验证通过，执行提交操作
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Form Submitted')),
);
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyForm(),
));
}