Flutter文本字段验证插件validation_textformfield的使用

Flutter文本字段验证插件validation_textformfield的使用

安装

1. 在pubspec.yaml文件中添加最新版本的包（并运行dart pub get）：

dependencies:
  validation_textformfield: latest_version

1. 在Flutter应用程序中导入并使用该包：

import 'package:validation_textformfield/validation_textformfield.dart';

这个Flutter包支持iOS、Android、Web、Windows、macOS和Linux平台。

示例代码

以下是一个完整的示例，展示了如何使用validation_textformfield插件进行文本字段验证。我们将创建一个包含电子邮件、密码和确认密码输入框的表单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text Field Validation Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

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

class _MyFormState extends State<MyForm> {
  final TextEditingController txtEmailCtrl = TextEditingController();
  final TextEditingController txtPasswordCtrl = TextEditingController();
  final TextEditingController txtConfPasswordCtrl = TextEditingController();
  bool _isObscure = true;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 邮箱输入框
        EmailValidationTextField(
          whenTextFieldEmpty: "请输入邮箱",
          validatorMassage: "请输入有效的邮箱",
          decoration: InputDecoration(
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black, width: 0.5),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black, width: 0.5),
            ),
            border: OutlineInputBorder(),
            counterText: '',
            hintStyle: TextStyle(color: Colors.black, fontSize: 18.0),
            labelText: '邮箱',
          ),
          textEditingController: txtEmailCtrl,
        ),
        SizedBox(height: 20),

        // 密码输入框
        PassWordValidationTextFiled(
          lineIndicator: false,
          passwordMinError: "密码长度必须超过5个字符",
          hasPasswordEmpty: "密码不能为空",
          passwordMaxError: "密码过长",
          passWordUpperCaseError: "至少包含一个大写字母",
          passWordDigitsCaseError: "至少包含一个数字",
          passwordLowercaseError: "至少包含一个小写字母",
          passWordSpecialCharacters: "至少包含一个特殊字符",
          obscureText: _isObscure,
          scrollPadding: EdgeInsets.only(left: 60),
          onChanged: (value) {
            // print(value);
          },
          passTextEditingController: txtPasswordCtrl,
          passwordMaxLength: 10,
          passwordMinLength: 5,
        ),
        SizedBox(height: 20),

        // 确认密码输入框
        ConfirmPassWordValidationTextFromField(
          obscureText: _isObscure,
          scrollPadding: EdgeInsets.only(left: 60),
          onChanged: (value) {
            // print(value);
          },
          whenTextFieldEmpty: "不能为空",
          validatorMassage: "密码不匹配",
          confirmtextEditingController: txtConfPasswordCtrl,
        ),
        SizedBox(height: 20),

        // 提交按钮
        ElevatedButton(
          onPressed: () {
            if (txtEmailCtrl.text.isNotEmpty &&
                txtPasswordCtrl.text.isNotEmpty &&
                txtConfPasswordCtrl.text.isNotEmpty &&
                txtPasswordCtrl.text == txtConfPasswordCtrl.text) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('提交成功')),
              );
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('请检查输入')),
              );
            }
          },
          child: Text('提交'),
        ),
      ],
    );
  }
}