Flutter表单验证插件flutter_laravel_form_validation的使用

Flutter Laravel Form Validation 是一个基于Dart扩展的简化版Flutter表单验证库，灵感来源于Laravel验证。

🎖 安装

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_laravel_form_validation: ^1.0.4

然后运行flutter pub get来安装包。

⚡️ 导入

在Dart文件中导入此库：

import 'package:flutter_laravel_form_validation/flutter_laravel_form_validation.dart';

🎮 使用方法

验证规则列表（短形式，无标签或自定义消息）

直接在TextFormField中使用字符串列表作为验证器：

TextFormField(
    validator : ['required','max:10','uppercase'].v,
),

或者使用FLValidator类的方法：

TextFormField(
    validator : [FLValidator.required, FLValidator.max(10), FLValidator.uppercase].v,
),

自定义验证函数

可以将自定义验证函数与内置验证器一起使用：

TextFormField(
    validator : [FLValidator.required, customValidation].v,
),

String? customValidation(String? value) {
    if (value == "flutterdev") {
        return "Value cannot be flutterdev";
    }
    return null;
}

字符串形式的验证规则（短形式，无标签或自定义消息）

可以直接用管道符号分隔的字符串表示多个验证规则：

TextFormField(
    validator : "required|max:10|uppercase".v,
),

带有标签或自定义消息的验证规则列表

可以在验证时指定字段名称和自定义错误信息：

TextFormField(
    validator : ['required', 'max:10', 'uppercase'].validate(
        attribute: 'Username',
        customMessages: {
            'required': "You must input your username",
            'max': "The length must be 10",
            'uppercase': "Only uppercase is allowed"
        },
    ),
),

也可以对字符串形式的验证规则做同样的处理：

TextFormField(
    validator : "required|max:10|uppercase".validate(
        attribute: 'Username',
        customMessages: {
            'required': "You must input your username",
            'max': "The length must be 10",
            'uppercase': "Only uppercase is allowed"
        },
    ),
),

规则列表

以下是部分可用的验证规则及其示例：

更多规则请参见原文档表格。

示例代码

以下是一个完整的示例应用，展示了如何使用flutter_laravel_form_validation进行表单验证：

import 'package:flutter/material.dart';
import 'package:flutter_laravel_form_validation/extensions/extensions.dart';
import 'package:flutter_laravel_form_validation/flutter_laravel_form_validation.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late GlobalKey<FormState> formKey;
  var _autoValidateMode = AutovalidateMode.disabled;

  @override
  void initState() {
    super.initState();
    formKey = GlobalKey<FormState>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(40.0),
        child: Form(
          autovalidateMode: _autoValidateMode,
          key: formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                key: const Key("username"),
                validator: [
                  FLValidator.required,
                  FLValidator.max(10),
                  FLValidator.email,
                  FLValidator.uppercase,
                  FLValidator.same("man"),
                ].validate(attribute: "Username fullname"),
              ),
              const SizedBox(height: 10),
              TextFormField(
                key: const Key("customval"),
                decoration: const InputDecoration(hintText: "Custom validation"),
                validator: [FLValidator.required, customValidation].v,
              ),
              const SizedBox(height: 10),
              TextFormField(
                key: const Key("email"),
                validator: 'required|email'.v,
              ),
              const SizedBox(height: 10),
              TextFormField(
                key: const Key("fullname"),
                validator: ['required', 'uppercase'].v,
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: handleSubmit,
                child: const Text("Submit"),
              )
            ],
          ),
        ),
      ),
    );
  }

  void handleSubmit() {
    final formState = formKey.currentState;
    if (formState == null) {
      return;
    }
    if (!formState.validate()) {
      setState(() {
        _autoValidateMode = AutovalidateMode.always;
      });
    } else {
      // 表单验证通过后的逻辑
    }
  }
}

// 自定义验证函数
String? customValidation(String? value) {
  if (value == "flutterdev") {
    return "Value cannot be flutterdev";
  }
  return null;
}

以上就是关于flutter_laravel_form_validation的基本介绍和使用方法。如果有任何问题或建议，欢迎随时提出！