Flutter输入验证插件input

Flutter输入验证插件input_validator的使用

通过有效的方式来验证输入值。

安装

运行以下命令：

flutter pub add input_validator

使用

make 方法会在验证通过时返回 null。

/// 导入包
import 'package:input_validator/input_validator.dart';

/// 基本示例
InputValidator.make(rules:"required|min_length:6", value:"password");

规则（Rules）

规则参数是一个字符串，它指导如何处理值。您可以提供尽可能多的规则，这些规则应该用 | 符号分隔。某些规则需要额外的参数，如 rule:param,param，这里的参数由逗号分隔。例如，您想获取用户性别，可以设置为 male,female,other。查看可用的验证规则及其解释。

值（Value）

值是要进行验证的有效载荷。

自定义验证消息

可以通过 messages 参数传递给 make 方法。它接受 Map<String, dynamic>。消息键应与规则名称匹配。消息值应为 String 或 CustomHandler。示例：

InputValidator.make(
    rules:"required|min_length:6",
    value:null,
    messages:{
        "required": "密码是必需的。",
    },
);

自定义规则

以下是自定义规则的一个示例：

/// 强密码验证，
/// 最少一个大写字母
/// 最少一个小写字母
/// 最少一个数字
/// 最少一个特殊字符
/// 允许的常见字符（! @ # $ & * ~）
InputValidator.make(
    rules:"strongPassword",
    value:null,
    messages:{
        "strongPassword": CustomHandler(onHandle: (payload, _) {
            String pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$&*~]).{8,}$';
            RegExp regExp = new RegExp(pattern);
            return regExp.hasMatch(payload) ? null:"无效的密码！";
        })
    },
);

表单构建器

通过表单构建器来构建表单。请参阅示例标签中的完整示例。

var _form = InputValidator.builder(
    fields: {
        "full_name": FieldData(rules: "required|min_length:4"),
        "username": FieldData(rules: "required|min_length:4"),
        "age": FieldData(rules: "required|min:10"),
    },
);

Container(
    child: _form.build(context, child: (state) => ...)
)

可用验证规则

以下是所有可用验证规则及其功能的列表：

必填（Required）
最小值（Min）
最大值（Max）
数字（Numeric）
大小（Size）
长度（Length）
最大长度（Max Length）
最小长度（Min Length）
电子邮件（Email）
在列表中（In）
日期（Date）
日期范围（Date Between）
日期之前（Date Before）
日期之后（Date After）
日期之前包含（Date Before Inclusive）
日期之后包含（Date After Inclusive）
自定义规则（Custom Rule）

必填（Required）

字段在输入数据中必须存在且不能为空。如果字段为空，则认为它是空的：

值为 null
值为一个空字符串

最小值（Min）

字段在验证时必须具有最小值且不能为空，并且该值应该是可转换为数值的。

// 示例
InputValidator.make(value: "5", rules: "min:10");
// 结果：至少提供10个字符。

最大值（Max）

字段在验证时必须具有最大值且不能为空，并且该值应该是可转换为数值的。

// 示例
InputValidator.make(value: "15", rules: "max:10");
// 结果：最大限制为10。

数字（Numeric）

字段在验证时必须是可以转换为数值的。

// 示例
InputValidator.make(value: "abc", rules: "numeric");
// 结果：无效的数字输入。

大小（Size）

字段在验证时必须是可以转换为数值的，并且大小应等于给定的大小。

// 示例
InputValidator.make(value: "5", rules: "size:10");
// 结果：大小应该是10。

长度（Length）

将调用 toString() 方法处理值，并检查字符串的长度是否与给定长度匹配。

// 示例
InputValidator.make(value: "5", rules: "length:10");
// 结果：输入应该是10个字符。

最小长度（Min Length）

将调用 toString() 方法处理值，并检查字符串的长度是否与给定长度匹配。

// 示例
InputValidator.make(value: "5", rules: "min_length:10");
// 结果：至少提供5个字符。

最大长度（Max Length）

将调用 toString() 方法处理值，并检查字符串的长度是否与给定长度匹配。

// 示例
InputValidator.make(value: "15", rules: "max_length:10");
// 结果：最多提供10个字符。

电子邮件（Email）

将使用正则表达式模式进行检查。您可以覆盖 Custom Handler 来自定义模式。

// 示例
InputValidator.make(value: "example@gmail", rules: "email");
// 结果：无效的电子邮件地址。

在列表中（In）

字段在验证时必须包含在给定的值列表中。

// 示例
InputValidator.make(value: "world", rules: "in:1,hello,world");
// 结果：无错误。

日期（Date）

有效的日期，可以使用 DateTime.parse() 解析。

// 示例
InputValidator.make(value: "date", rules: "date");
// 结果：无效的日期。

日期范围（Date Between）

有效的日期，可以使用 DateTime.parse() 解析。确保给定的日期在最小日期和最大日期之间。

// 示例 'date_between:min,max'
InputValidator.make(value: "2021-04-10", rules: "date_between:2021-05-17,2021-07-17");
// 结果：日期超出范围。

日期之前（Date Before）

有效的日期，可以使用 DateTime.parse() 解析。确保给定的日期早于检查日期。也可以尝试 Date Before Inclusive。

// 示例 'date_before:date'
InputValidator.make(value: "2021-04-10", rules: "date_before:2021-05-17");
// 结果：无错误。

日期之后（Date After）

有效的日期，可以使用 DateTime.parse() 解析。确保给定的日期晚于检查日期。也可以尝试 Date After Inclusive。

// 示例 'date_after:date'
InputValidator.make(value: "2021-04-10", rules: "date_after:2021-05-17");
// 结果：提供更晚的日期。

日期之后包含（Date After Inclusive）

有效的日期，可以使用 DateTime.parse() 解析。确保给定的日期晚于或等于检查日期。

// 示例 'date_after_inclusive:date'
InputValidator.make(value: "2021-05-17", rules: "date_after_inclusive:2021-05-17");
// 结果：无错误。

日期之前包含（Date Before Inclusive）

有效的日期，可以使用 DateTime.parse() 解析。确保给定的日期早于或等于检查日期。

// 示例 'date_before_inclusive:date'
InputValidator.make(value: "2021-05-17", rules: "date_before_inclusive:2021-05-17");
// 结果：无错误。

示例代码

以下是一个完整的示例代码，展示了如何使用 input_validator 插件来验证表单字段：

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Input Validator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// 初始化表单构建器字段
  final formBuilder = InputValidator.builder(fields: {
    "full_name": FieldData(rules: "required|min_length:4"),
    "email": FieldData(rules: "required|email"),
    "password": FieldData(
      rules: "required|min_length:6|max_length:16|strong",
      messages: {
        "strong": CustomHandler(
          onHandle: (payload, _) {
            String p = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$';
            return payload != null && RegExp(p).hasMatch(payload)
                ? null
                : "需要大写字母、小写字母、数字和符号。";
          },
        ),
      },
    ),
    "username": FieldData(rules: "required|min_length:4"),
  });

  [@override](/user/override)
  void dispose() {
    /// 释放表单构建器的流
    formBuilder.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("输入验证演示"),
      ),
      body: formBuilder.build(
        context: context,
        child: (formState) {
          return Column(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        onChanged: (value) async {
                          if (formState.add("username", value)) {
                            formState.setState = "CHECKING_USERNAME";
                            var isValid = await checkUsername(value);
                            if (!isValid) {
                              formState.setError("username", "用户名不可用。");
                            } else {
                              formState.setError("username", null);
                            }
                            formState.setState = "STABLE";
                          }
                        },
                        decoration: InputDecoration(
                          icon: Icon(Icons.person),
                          labelText: "用户名",
                          errorText: formState.getError("username"),
                        ),
                      ),
                    ),
                    if (formState.currentState == "CHECKING_USERNAME")
                      CircularProgressIndicator()
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: TextField(
                  onChanged: (value) => formState.add("full_name", value),
                  decoration: InputDecoration(
                    icon: Icon(Icons.edit),
                    labelText: "全名",
                    errorText: formState.getError("full_name"),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: TextField(
                  onChanged: (value) => formState.add("email", value),
                  decoration: InputDecoration(
                    icon: Icon(Icons.email),
                    labelText: "电子邮件",
                    errorText: formState.getError("email"),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: TextField(
                  onChanged: (value) => formState.add("password", value),
                  decoration: InputDecoration(
                    icon: Icon(Icons.lock_open),
                    labelText: "密码",
                    errorText: formState.getError("password"),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: ElevatedButton(
                  onPressed: !formState.hasError && formState.currentState != "CHECKING_USERNAME"
                      ? () {
                          if (formState.validate()) {
                            print(formState.formData);
                          } else {
                            print("无效的输入");
                          }
                        }
                      : null,
                  child: Text("提交"),
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  Future<bool> checkUsername(String value) {
    var used = ["test", "hello", "utpal", "sarkar"];
    int d = Random(0).nextInt(2);
    return Future.delayed(Duration(seconds: d), () {
      return !used.contains(value);
    });
  }
}

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

phonegap100 1楼•3 天前

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

当然，input_validator 是一个在 Flutter 中非常有用的插件，用于处理各种输入验证场景。以下是一个如何使用 input_validator 插件的示例代码案例。

首先，确保你已经在 pubspec.yaml 文件中添加了 input_validator 依赖：

dependencies:
  flutter:
    sdk: flutter
  input_validator: ^x.y.z  # 替换为最新版本号

然后，运行 flutter pub get 以获取依赖包。

接下来是一个简单的示例，展示如何在 Flutter 应用中使用 input_validator 进行输入验证：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Input 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>();
  String _email = '';
  String _password = '';
  String _errorMessage = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Input Validator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (!EmailValidator().isValid(value)) {
                    return 'Please enter a valid email address.';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _email = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                validator: (value) {
                  if (value.length < 6) {
                    return 'Password must be at least 6 characters long.';
                  }
                  // 你可以添加更多的验证规则，比如包含字母和数字等
                  return null;
                },
                obscureText: true,
                onChanged: (value) {
                  setState(() {
                    _password = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    // 如果验证通过，执行进一步操作，比如提交表单
                    setState(() {
                      _errorMessage = '';
                    });
                    // 这里可以添加提交表单的逻辑
                    print('Email: $_email');
                    print('Password: $_password');
                  } else {
                    // 如果验证失败，显示错误信息
                    setState(() {
                      _errorMessage = 'Please fix the errors in the form.';
                    });
                  }
                },
                child: Text('Submit'),
              ),
              SizedBox(height: 10),
              Text(_errorMessage),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的表单，包含两个文本字段：一个用于输入电子邮件，另一个用于输入密码。我们使用 EmailValidator 类来验证电子邮件地址的有效性，并手动检查密码的长度。如果表单验证失败，会显示一个错误信息。

注意，input_validator 插件提供了多种预定义的验证器，例如 EmailValidator, PhoneNumberValidator, UrlValidator 等，你可以根据需要进行选择和使用。同时，你也可以自定义验证逻辑来满足特定的需求。