Flutter表单验证插件fform_validator的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter表单验证插件fform_validator的使用

FFormValidator 是一个简单且轻量级的Dart包,用于验证表单输入,例如电子邮件、URL、IP地址、信用卡号等。它提供了方便的验证方法,以确保表单数据符合特定标准,而无需从头编写复杂的验证逻辑。

特性

  • 验证字符串是否非空 (isRequired)。
  • 验证字符串是否为有效的电子邮件 (isEmail)。
  • 验证字符串是否为有效的URL (isUrl)。
  • 验证字符串的最小或最大长度。
  • 验证字符串是否为有效的IPv4或IPv6地址。
  • 验证字符串是否只包含数字字符。
  • 验证字符串是否全为小写或大写。
  • 验证字符串是否包含特殊字符。
  • 验证字符串是否为有效的信用卡号(可选格式)。

安装

运行以下命令:

flutter pub add fform_validator

使用

要使用 FFormValidator 类,只需创建一个带有您要验证的字符串的实例,并调用适当的验证方法。

示例

import 'package:fform_validator/fform_validator.dart';

void main() {
  final validator = FFormValidator('hello');

  print(validator.isRequired); // true
  print(validator.isEmail); // false

  final emailValidator = FFormValidator('test@example.com');
  print(emailValidator.isEmail); // true

  final urlValidator = FFormValidator('https://www.example.com');
  print(urlValidator.isUrl); // true
}

方法

方法 描述
bool get isRequired 如果字符串非空,则返回 true
bool get isEmail 如果字符串是一个有效的电子邮件地址,则返回 true
bool get isUrl 如果字符串是一个有效的URL,则返回 true
bool isMinLength(int length) 如果字符串长度至少为 length 个字符,则返回 true
bool isMaxLength(int length) 如果字符串长度最多为 length 个字符,则返回 true
bool isLength(int length) 如果字符串长度恰好为 length 个字符,则返回 true
bool get isIp 如果字符串是一个有效的IPv4地址,则返回 true
bool get isIpv6 如果字符串是一个有效的IPv6地址,则返回 true
bool get isNumber 如果字符串只包含数字字符,则返回 true
bool get isHaveNumber 如果字符串包含数字字符,则返回 true
bool get isFloat 如果字符串只包含数字字符(不强制要求有小数点),则返回 true
bool get isHaveFloat 如果字符串包含数字字符(不强制要求有小数点),则返回 true
bool get isLowercase 如果字符串全是小写字母,则返回 true
bool get isUppercase 如果字符串全是大写字母,则返回 true
bool get isHaveSpecialChar 如果字符串包含任何特殊字符,则返回 true
bool isCreditCard({String space = ' '}) 如果字符串是一个有效的信用卡号,则返回 true。可以处理空格。

验证信用卡号示例

final cardValidator = FFormValidator('1234 5678 1234 5678');
print(cardValidator.isCreditCard()); // true

验证IP地址示例

final ipValidator = FFormValidator('192.168.1.1');
print(ipValidator.isIp); // true

final ipv6Validator = FFormValidator('2001:0db8:85a3:0000:0000:8a2e:0370:7334');
print(ipv6Validator.isIpv6); // true

推荐与 fform 包结合使用

为了创建具有灵活验证功能的自定义输入字段,建议将 fform 包与您的验证器(如 fform_validator)结合使用。这允许您检查密码字段值是否满足要求,例如最小长度、特殊字符和数字,同时输出详细的错误信息。

自定义密码字段示例

import 'package:fform/fform.dart';
import 'package:fform_validator/fform_validator.dart';

class PasswordValidationException extends FFormException {
  final bool isMinLengthValid;
  final bool isSpecialCharValid;
  final bool isNumberValid;

  PasswordValidationException({
    required this.isMinLengthValid,
    required this.isSpecialCharValid,
    required this.isNumberValid,
  });
  
  bool get isValid => isMinLengthValid && isSpecialCharValid && isNumberValid;
}

class PasswordField extends FFormField<String, PasswordValidationException> {
  PasswordField(String value) : super(value);

  [@override](/user/override)
  PasswordValidationException? validator(String value) {
    final validator = FFormValidator(value);
    return PasswordValidationException(
      isMinLengthValid: validator.isMinLength(8),
      isSpecialCharValid: validator.isHaveSpecialChar,
      isNumberValid: validator.isHaveNumber,
    );
  }
}

更多关于Flutter表单验证插件fform_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单验证插件fform_validator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用fform_validator插件进行表单验证的详细代码示例。

首先,确保你已经在pubspec.yaml文件中添加了fform_validator依赖:

dependencies:
  flutter:
    sdk: flutter
  fform_validator: ^0.10.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

以下是一个完整的Flutter应用程序示例,展示了如何使用fform_validator进行表单验证:

import 'package:flutter/material.dart';
import 'package:fform_validator/fform_validator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form 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>();
  late FFormValidator fformValidator;

  @override
  void initState() {
    super.initState();
    fformValidator = FFormValidator([
      FFormFieldValidator(
        field: 'email',
        validators: [
          FFieldIsRequiredValidator(errorText: 'Email is required'),
          FFieldIsEmailValidator(errorText: 'Invalid email format'),
        ],
      ),
      FFormFieldValidator(
        field: 'password',
        validators: [
          FFieldIsRequiredValidator(errorText: 'Password is required'),
          FFieldMinLengthValidator(minLength: 6, errorText: 'Password must be at least 6 characters'),
        ],
      ),
    ]);
  }

  void _submitForm() {
    if (formKey.currentState!.validate()) {
      fformValidator.validateFields(formKey.currentState!, (errors) {
        if (errors.isNotEmpty) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Please fix the errors in the form'),
            ),
          );
        } else {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Form submitted successfully!'),
            ),
          );
          // Handle form submission
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  return fformValidator.validateField('email', value);
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  return fformValidator.validateField('password', value);
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖引入: 在pubspec.yaml文件中添加fform_validator依赖。

  2. 初始化FFormValidator: 在initState方法中初始化FFormValidator,并定义表单字段及其验证规则。

  3. 表单构建: 使用Form组件构建表单,并在TextFormFieldvalidator属性中调用fformValidator.validateField方法进行字段验证。

  4. 提交表单: 在按钮的onPressed回调中,首先调用formKey.currentState!.validate()来验证整个表单,然后调用fformValidator.validateFields来进一步验证每个字段,并根据验证结果显示SnackBar。

这个示例展示了如何使用fform_validator插件进行基本的表单验证。你可以根据需要添加更多的验证规则和字段。

回到顶部