Flutter邮件地址验证插件email_validator_package的使用

email_validator_package 是一个用于在Dart和Flutter中验证电子邮件地址的插件。它通过正则表达式进行验证，并且完全基于Dart，没有其他依赖项。我分享了一个完整的项目示例，在其中我使用了此电子邮件验证功能。

安装

首先创建一个新的项目：

flutter create MyApp

然后在你的 pubspec.yaml 文件中添加以下依赖：

email_validator_package: ^x.y.z  # 替换为最新版本号

或者直接运行以下命令来添加依赖：

flutter pub add email_validator_package

在你的库文件中添加以下导入语句：

import 'package:email_validator_package/email_validator_package.dart';

使用

下面是一个简单的示例，展示了如何在Flutter应用中使用 email_validator_package 进行电子邮件验证：

import 'dart:developer';
import 'package:email_validator_package/email_validator_package.dart';
import 'package:flutter/material.dart';

// 主应用类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Email Validator Package',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

// 主页面类
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

// 主页面状态类
class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 测试的邮箱地址
    String email = "addweb@yopmail.com";
    String email2 = 'invalid_email@';

    // 验证邮箱地址
    bool isValidEmail = EmailValidator.validateEmail(email);
    bool isValidEmail2 = EmailValidator.validateEmail(email2);

    // 打印验证结果
    log("isValidEmail: $isValidEmail");
    log("isValidEmail2: $isValidEmail2");

    return Scaffold(
      appBar: AppBar(
        title: const Text("Email Validation"),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          child: Column(
            children: [
              // 显示验证结果
              Text("$isValidEmail"),
              // 文本输入框
              TextFormField(
                validator: (value) {
                  // 验证逻辑
                  if (value!.isEmpty) {
                    return "请输入邮箱地址";
                  } else if (EmailValidator.validateEmail(value)) {
                    return "请输入有效的邮箱地址";
                  }
                  return null;
                },
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  enabledBorder: OutlineInputBorder(),
                  errorBorder: OutlineInputBorder(),
                  focusedBorder: OutlineInputBorder(),
                  disabledBorder: OutlineInputBorder(),
                  focusedErrorBorder: OutlineInputBorder(),
                  hintText: '邮箱地址',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter邮件地址验证插件email_validator_package的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼

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

当然，下面是一个关于如何在Flutter项目中使用email_validator包来验证邮件地址的示例代码。

首先，你需要在你的pubspec.yaml文件中添加email_validator依赖：

dependencies:
  flutter:
    sdk: flutter
  email_validator: ^2.0.1  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中（例如main.dart），你可以使用EmailValidator类来验证邮件地址。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Email Validator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: EmailValidatorScreen(),
    );
  }
}

class EmailValidatorScreen extends StatefulWidget {
  @override
  _EmailValidatorScreenState createState() => _EmailValidatorScreenState();
}

class _EmailValidatorScreenState extends State<EmailValidatorScreen> {
  final TextEditingController _controller = TextEditingController();
  String _validationMessage = '';

  void _validateEmail() {
    final String email = _controller.text;
    final EmailValidator emailValidator = EmailValidator();

    if (emailValidator.isValid(email)) {
      setState(() {
        _validationMessage = 'Email is valid!';
      });
    } else {
      setState(() {
        _validationMessage = 'Email is invalid!';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Email Validator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter your email',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _validateEmail,
              child: Text('Validate Email'),
            ),
            SizedBox(height: 16),
            Text(
              _validationMessage,
              style: TextStyle(fontSize: 18, color: Colors.redAccent),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个文本字段用于输入电子邮件地址，一个按钮用于触发验证，以及一个文本显示验证结果。

EmailValidatorScreen 是一个有状态的组件，它包含一个 TextEditingController 来管理文本字段的内容。
_validateEmail 方法使用 EmailValidator 类的 isValid 方法来检查输入的电子邮件地址是否有效。
根据验证结果，我们更新 _validationMessage 状态，并在UI中显示相应的消息。

运行这个示例应用，输入一个电子邮件地址并点击“Validate Email”按钮，你会看到验证结果即时显示在屏幕上。