Flutter表单验证插件the_validator的使用

the_validator 是一个简单且轻量级的Flutter表单和数据验证包。本文将详细介绍如何使用该插件进行表单验证，并提供完整的示例代码。

如何使用

直接在 TextFormField 中使用

你可以直接在 TextFormField 的 validator 参数中使用 the_validator：

TextFormField(
  controller: _emailController,
  validator: FieldValidator.email(),
  decoration: InputDecoration(labelText: "Email"),
),

独立使用

你也可以将其作为独立的验证器来使用：

bool isValid = Validator.isPassword('SecretPass', shouldContainCapitalLetter: true);

示例用法 (FieldValidator)

以下是如何使用 FieldValidator 来验证电子邮件和密码字段的示例：

TextFormField(
  controller: _emailController,
  validator: FieldValidator.email(),
  decoration: InputDecoration(labelText: "Email"),
),

TextFormField(
  controller: _passwordController,
  validator: FieldValidator.password(
    minLength: 8,
    shouldContainNumber: true,
    shouldContainCapitalLetter: true,
    shouldContainSmallLetter: true,
    shouldContainSpecialChars: true,
    errorMessage: "Password must match the required format",
    isNumberNotPresent: () => "Password must contain number",
    isSpecialCharsNotPresent: () => "Password must contain special characters",
    isCapitalLetterNotPresent: () => "Password must contain capital letters",
  ),
  decoration: InputDecoration(labelText: "Password"),
),

TextFormField(
  controller: _confirmPasswordController,
  obscureText: true,
  validator: FieldValidator.equalTo(_passwordController, message: "Password Mismatch"),
  decoration: InputDecoration(labelText: "Confirm Password"),
),

然后调用 formState.validate() 方法来进行验证：

RaisedButton(
  onPressed: () {
    if (_formKey.currentState.validate()) {
      _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Yay! we got it right!")));
    }
  },
  child: Text("Submit"),
)

示例用法 (Validator)

以下是如何使用 Validator 类来验证密码是否匹配的示例：

var password = 'Secret';
var confirmPassword = 'secret';

if (Validator.isPassword(password, shouldContainCapitalLetter: true)) {
  if (Validator.isEqualTo(password, confirmPassword)) {
    print("Go ahead & grant access");
  } else {
    print("Password mismatch");
  }
}

错误消息

默认情况下，the_validator 会根据指定的验证类型为字段或输入生成合理的错误消息。你也可以覆盖默认的消息。

默认错误消息

例如，FieldValidator.alphaNumeric() 将输出：

• Field must contain both alphabets and numbers

自定义错误消息

你可以通过传递自定义消息来覆盖默认消息：

FieldValidator.alphaNumeric(message: 'Your username must contain both numbers & alphabets')

完整示例 Demo

以下是包含完整表单验证逻辑的完整示例代码：

import 'package:flutter/material.dart';
import 'package:the_validator/the_validator.dart'; // 引入 the_validator 包

void main() => runApp(MyApp());

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

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

class _FormScreenState extends State<FormScreen> {
  final _formKey = GlobalKey<FormState>();
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _confirmPasswordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('Form Validation Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: <Widget>[
              TextFormField(
                controller: _emailController,
                validator: FieldValidator.email(),
                decoration: InputDecoration(labelText: "Email"),
              ),
              SizedBox(height: 20),
              TextFormField(
                controller: _passwordController,
                validator: FieldValidator.password(
                  minLength: 8,
                  shouldContainNumber: true,
                  shouldContainCapitalLetter: true,
                  shouldContainSmallLetter: true,
                  shouldContainSpecialChars: true,
                  errorMessage: "Password must match the required format",
                  isNumberNotPresent: () => "Password must contain number",
                  isSpecialCharsNotPresent: () => "Password must contain special characters",
                  isCapitalLetterNotPresent: () => "Password must contain capital letters",
                ),
                decoration: InputDecoration(labelText: "Password"),
                obscureText: true,
              ),
              SizedBox(height: 20),
              TextFormField(
                controller: _confirmPasswordController,
                validator: FieldValidator.equalTo(_passwordController, message: "Password Mismatch"),
                decoration: InputDecoration(labelText: "Confirm Password"),
                obscureText: true,
              ),
              SizedBox(height: 40),
              RaisedButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("Yay! we got it right!")));
                  }
                },
                child: Text("Submit"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}