Flutter表单验证插件easy_form_validator的使用
Flutter表单验证插件easy_form_validator的使用
easy_form_validator 是一个用于简化 Flutter 表单验证的插件，支持常见的验证需求，例如空字段检查、电子邮件格式验证、出生日期验证、电话号码验证等。此外，它还支持印度的 Aadhaar 卡号验证，增强了表单验证的便捷性和准确性。
安装
1. 在 pubspec.yaml 文件中添加依赖
在您的项目中添加以下依赖项，并运行 dart pub get：
dependencies:
easy_form_validator: 0.0.2
2. 导入并使用插件
在 Dart 文件中导入 easy_form_validator 并在应用中使用：
import 'package:easy_form_validator/easy_form_validator.dart';
示例代码
以下是一些常见表单字段验证的完整示例代码。
示例 1：空字段验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onValue) {
// 检查字段是否为空或为 null
// 您可以自定义错误消息和必填字段属性
return onValue.isNotEmptyNotNull(
emptyErrorMsg: "请输入文本字段的内容",
isMandatory: true
);
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 2：电子邮件验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onEmail) {
// 验证电子邮件格式
// 您可以自定义错误消息和默认验证错误消息
return onEmail.isValidEmail(
emailErrorValidationMsg: "电子邮件无效",
emptyErrorMsg: "请输入内容"
);
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 3：电话号码验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onPhoneNumber) {
// 验证电话号码长度
// 您可以自定义错误消息和默认验证错误消息
return onPhoneNumber.isValidPhoneNumber(
countryCode: Country.IN,
isMandatory: true,
emptyErrorMsg: "请输入电话号码",
phoneNumberErrorValidationMsg: "电话号码无效",
wantSkipCountryCodeNo: true
);
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 4：密码验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onPassword) {
// 验证密码复杂度
// 您可以自定义最小/最大长度、是否包含数字、大小写字母等
return onPassword.isValidPassword(
minPass: 6,
maxPass: 12,
hasDigit: true,
hasLowercase: true,
hasUppercase: true,
enterSpecialCharacter: "!@#",
emptyErrorMsg: "请输入密码",
isMandatory: true
);
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 5：用户名验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onUsername) {
// 验证用户名格式
return onUsername.isValidUsername(
emptyErrorMsg: "请输入用户名"
);
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 6：出生日期验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onDOB) {
// 验证日期格式
// 自定义日期格式验证逻辑
List? lstDate = onDOB?.split("/");
if ((lstDate?.isNotEmpty ?? false) && (lstDate!.length != 3)) return "无效日期";
int? day = int.tryParse(lstDate?.first);
int? month = int.tryParse(lstDate?[1]);
int? year = int.tryParse(lstDate?.last);
if (day == null || month == null || year == null) return "无效日期";
DateTime datetime = DateTime(year, month, day);
return datetime.isValidDOB();
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
示例 7：Aadhaar 卡号验证
class EasyScreen extends StatelessWidget {
const EasyScreen({Key? key}) : super(key: key);
final _formKey = GlobalKey<FormState>();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (onAadhaarCard) {
// 验证 Aadhaar 卡号
return onAadhaarCard.isValidAadhaarCardNo();
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
// 表单有效，处理数据
// 例如提交表单或更新状态
}
},
child: Text('提交'),
),
],
),
),
);
}
}
更多关于Flutter表单验证插件easy_form_validator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter表单验证插件easy_form_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
easy_form_validator 是一个用于 Flutter 应用的简单表单验证插件。它可以帮助开发者轻松地验证表单字段，并提供清晰的错误提示。以下是使用 easy_form_validator 的基本步骤和示例。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 easy_form_validator 依赖：
dependencies:
flutter:
sdk: flutter
easy_form_validator: ^latest_version
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 easy_form_validator 包：
import 'package:easy_form_validator/easy_form_validator.dart';
3. 创建表单并添加验证
你可以使用 EasyFormValidator 来验证表单字段。以下是一个简单的示例，展示如何使用 easy_form_validator 来验证一个包含电子邮件和密码的表单。
import 'package:flutter/material.dart';
import 'package:easy_form_validator/easy_form_validator.dart';
class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Form Validation'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
validator: EasyFormValidator().email('Please enter a valid email address'),
),
SizedBox(height: 16.0),
TextFormField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: EasyFormValidator().minLength(6, 'Password must be at least 6 characters'),
),
SizedBox(height: 24.0),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// 表单验证通过，处理表单数据
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Form Submitted Successfully')),
);
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
}
4. 运行应用
运行你的 Flutter 应用，你将看到一个包含电子邮件和密码输入字段的表单。当你尝试提交表单时，如果输入的数据不符合验证规则，将会显示相应的错误提示。
5. 其他验证规则
easy_form_validator 提供了多种验证规则，例如：
required: 字段不能为空。email: 验证电子邮件格式。minLength: 验证最小长度。maxLength: 验证最大长度。numeric: 验证是否为数字。equalTo: 验证两个字段的值是否相等。
你可以根据需要使用这些规则来验证表单字段。
6. 自定义错误提示
你可以自定义错误提示信息。例如：
validator: EasyFormValidator().required('This field is required'),
7. 组合验证
你还可以组合多个验证规则。例如：
validator: EasyFormValidator()
.required('This field is required')
.email('Please enter a valid email address'),