Flutter表单验证插件form_field_validator的使用

form_field_validator 是一个用于Flutter应用程序中简化表单字段验证的插件，它提供了常见的验证选项。下面将详细介绍如何使用这个插件，并提供完整的示例代码。

使用方法

单个规则验证

您可以直接为 TextFormField 的 validator 属性分配验证器，而无需手动传递值。例如，对于电子邮件地址的验证：

TextFormField(
  validator: EmailValidator(errorText: '请输入有效的电子邮件地址'),
);

您也可以创建可重用的验证器实例。例如，确保某个字段是必填项：

final requiredValidator = RequiredValidator(errorText: '此字段为必填项');

// 将其分配给validator属性
TextFormField(
  validator: requiredValidator,
);

多规则验证

有时我们需要对同一个输入框应用多个验证规则。可以使用 MultiValidator 来实现这一点。以下是一个密码验证的例子，它要求密码不能为空、长度至少8位并且包含特殊字符：

final passwordValidator = MultiValidator([
  RequiredValidator(errorText: '密码为必填项'),
  MinLengthValidator(8, errorText: '密码长度至少8位'),
  PatternValidator(r'(?=.*?[#?!@$%^&*-])', errorText: '密码必须包含至少一个特殊字符')
]);

String password;

Form(
  key: _formKey,
  child: Column(children: [
    TextFormField(
      obscureText: true,
      onChanged: (val) => password = val,
      validator: passwordValidator,
    ),
    
    // 使用MatchValidator来确认两次输入的密码是否一致
    TextFormField(
      validator: (val) => MatchValidator(errorText: '两次输入的密码不匹配').validateMatch(val, password),
    )
  ]),
);

创建自定义验证器

如果您需要特定业务逻辑下的验证规则，可以通过继承 TextFieldValidator 或者 FieldValidator<T> 类来自定义验证器。这里以验证利比亚电话号码为例：

class LYDPhoneValidator extends TextFieldValidator {
  LYDPhoneValidator({String errorText = '请输入有效的利比亚电话号码'}) : super(errorText);

  @override
  bool get ignoreEmptyValues => true; // 如果为空时不显示错误信息
  
  @override
  bool isValid(String value) {
    return hasMatch(r'^((+|00)?218|0?)?(9[0-9]{8})$', value);
  }
}

// 使用时直接分配给validator属性
TextFormField(
  validator: LYDPhoneValidator(),
);

对于非字符串类型的验证，您可以扩展 FieldValidator<T> 类并实现相应的验证逻辑。

示例Demo

为了更直观地理解上述内容，下面给出一个完整的登录界面示例，包括了用户名和密码两个输入框以及对应的验证规则。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('表单验证示例')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: LoginForm(),
        ),
      ),
    );
  }
}

class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<LoginForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String email;
  String password;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: '邮箱'),
            validator: MultiValidator([
              RequiredValidator(errorText: '邮箱为必填项'),
              EmailValidator(errorText: '请输入有效的电子邮件地址')
            ]),
            onSaved: (value) => email = value,
          ),
          TextFormField(
            decoration: InputDecoration(labelText: '密码'),
            obscureText: true,
            validator: MultiValidator([
              RequiredValidator(errorText: '密码为必填项'),
              MinLengthValidator(8, errorText: '密码长度至少8位'),
              PatternValidator(r'(?=.*?[#?!@$%^&*-])', errorText: '密码必须包含至少一个特殊字符')
            ]),
            onSaved: (value) => password = value,
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                _formKey.currentState.save();
                // 执行登录操作...
                print('Email: $email, Password: $password');
              }
            },
            child: Text('登录'),
          ),
        ],
      ),
    );
  }
}

以上就是关于 form_field_validator 插件的基本介绍及使用方式。通过这些例子，您可以轻松地在自己的项目中集成该插件来进行表单验证。希望这对您有所帮助！