Flutter账号注册格式校验插件check_sign_up_format的使用

概述

check_sign_up_format 是一个用于验证用户输入是否符合特定格式要求的 Dart 库。该库提供了多种验证函数，包括对名字、ID、电子邮件、密码、密码确认以及电话号码的格式校验。

特性

• 名字校验（仅允许字母字符）。
• ID 校验（仅允许英文字母和数字）。
• 邮件地址校验（符合标准的电子邮件格式）。
• 密码校验（包含字母、数字和特殊字符的组合）。
• 密码确认校验（两次输入的密码是否一致）。
• 电话号码校验（仅允许数字）。

使用步骤

1. 添加依赖

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

dependencies:
  check_sign_up_format: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 创建校验示例

以下是一个完整的 Flutter 示例代码，展示了如何使用 check_sign_up_format 插件进行账号注册格式校验。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'check sign up format',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const CheckSignUpFormatTest(),
    );
  }
}

class CheckSignUpFormatTest extends StatefulWidget {
  const CheckSignUpFormatTest({super.key});

  [@override](/user/override)
  State<CheckSignUpFormatTest> createState() => _CheckSignUpFormatTestState();
}

class _CheckSignUpFormatTestState extends State<CheckSignUpFormatTest> {
  // 定义全局表单键
  final nameFormKey = GlobalKey<FormState>();
  final idFormKey = GlobalKey<FormState>();
  final emailFormKey = GlobalKey<FormState>();
  final passwordFormKey = GlobalKey<FormState>();
  final verifyPasswordFormKey = GlobalKey<FormState>();
  final phoneNumFormKey = GlobalKey<FormState>();

  // 定义焦点节点
  final FocusNode nameFocusNode = FocusNode();
  final FocusNode idFocusNode = FocusNode();
  final FocusNode emailFocusNode = FocusNode();
  final FocusNode passwordFocusNode = FocusNode();
  final FocusNode verifyPasswordFocusNode = FocusNode();
  final FocusNode phoneNumFocusNode = FocusNode();

  // 定义文本控制器
  final TextEditingController nameTextController = TextEditingController();
  final TextEditingController idTextController = TextEditingController();
  final TextEditingController emailTextController = TextEditingController();
  final TextEditingController passwordTextController = TextEditingController();
  final TextEditingController verifyPasswordTextController = TextEditingController();
  final TextEditingController phoneNumTextController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("check sign up format"),
      ),
      body: Padding(
        padding: const EdgeInsetsDirectional.all(20),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 名字字段
                testTextField(
                  'name',
                  nameFormKey,
                  nameFocusNode,
                  nameTextController,
                  Validator.nameValidator,
                  'input name',
                  false,
                ),
                // ID 字段
                testTextField(
                  'id',
                  idFormKey,
                  idFocusNode,
                  idTextController,
                  Validator.idValidator,
                  'input id',
                  false,
                ),
                // 邮件字段
                testTextField(
                  'email',
                  emailFormKey,
                  emailFocusNode,
                  emailTextController,
                  Validator.emailValidator,
                  'input email',
                  false,
                ),
                // 密码字段
                testTextField(
                  'password',
                  passwordFormKey,
                  passwordFocusNode,
                  passwordTextController,
                  Validator.passwordValidator,
                  'input password',
                  true,
                ),
                // 确认密码字段
                testTextField(
                  'verify password',
                  verifyPasswordFormKey,
                  verifyPasswordFocusNode,
                  verifyPasswordTextController,
                  Validator.verifyPasswordValidator,
                  'input password',
                  true,
                ),
                // 电话号码字段
                testTextField(
                  'phone number',
                  phoneNumFormKey,
                  phoneNumFocusNode,
                  phoneNumTextController,
                  Validator.phoneNumValidator,
                  'input phone number',
                  false,
                ),
                // 提交按钮
                checkButton(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 构建单个输入框
  Widget testTextField(String title,
      GlobalKey? globalKey,
      FocusNode? focusNode,
      TextEditingController? controller,
      Function? validator,
      String hintText,
      bool isObscure) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title),
        const SizedBox(height: 10),
        Form(
          key: globalKey,
          child: TextFormField(
            focusNode: focusNode,
            controller: controller,
            validator: (value) {
              // 对于确认密码字段，需要与主密码进行对比
              if (title == 'verify password') {
                return validator!(value, passwordTextController.text);
              }
              return validator!(value);
            },
            style: const TextStyle(
                color: Colors.black,
                fontSize: 16,
                fontWeight: FontWeight.w400),
            decoration: InputDecoration(
              contentPadding: const EdgeInsetsDirectional.all(20),
              hintText: hintText,
              hintStyle: const TextStyle(
                  color: Colors.black12,
                  fontSize: 16,
                  fontWeight: FontWeight.w400),
              errorStyle: const TextStyle(
                  color: Colors.red,
                  fontSize: 12,
                  fontWeight: FontWeight.w400),
              enabledBorder: const OutlineInputBorder(),
              focusedBorder: const OutlineInputBorder(),
              focusedErrorBorder: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.red)),
              errorBorder: const OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.red)),
            ),
            obscureText: isObscure,
          ),
        ),
        const SizedBox(height: 30),
      ],
    );
  }

  // 构建提交按钮
  Widget checkButton() {
    return ElevatedButton(
      onPressed: () {
        // 验证所有表单字段
        nameFormKey.currentState!.validate();
        idFormKey.currentState!.validate();
        emailFormKey.currentState!.validate();
        passwordFormKey.currentState!.validate();
        verifyPasswordFormKey.currentState!.validate();
        phoneNumFormKey.currentState!.validate();
      },
      child: const Text('check'),
    );
  }
}