【Flutter】emailのバリデーション(正規表現)

実装背景

Flutterのアプリ側である程度のバリデーションチェックをしたいと思い、
正規表現について学習した記録と実装方法を残す

正規表現について

まず正規表現について学習しました。
サルにもわかる正規表現入門

正規表現は

いくつかの文字列を一つの形式で表現するための表現方法

この表現がしっくり来ました。
今回の場合メールアドレスのバリデーションチェックをしたいのですが、
メールアドレスはいろんな種類があって

• 英字+@+英字+.+英字のパターン

[e-mail]

• 英数字+@+英字+.+英字

[e-mail]

• 英数字(特殊文字込み)+@+英字+.+英字

[e-mail]

などなどいろんなパターンがありますが、
メールアドレスだと基本的には文字+@+文字+.+文字
のように必ず、@と.があります。(ない場合あったらごめんなさい)

なので、この形式になるように正規表現でチェックすれば良さそうです。

メールのバリデーション(正規表現)

バリデーションで使用する正規表現の読み方

正規表現を使うためにはまず、正規表現で書かれている記号の意味を理解する必要がありました。(上記の記事時の具体例がわかりやすかったです。)

emailの正規表現は

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)

こちらで良さそうですが、
もっとルールを軽くしたり、重くしたりのカスタマイズもできるので
その辺りは要件に合わせてやってみるといいと思います。
※例えばgmailの[e-mail]などの**+1**を許容しないようにするなど

Flutter(Dart)でのバリデーションの実装

コピペで貼り付けられるように、全文を載せておきます。

main.dart

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
　final _emailTextController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _emailTextController,
            ),
            FlatButton(
              onPressed: (){
                _emailValidation();
              },
              child: Text('バリデーション'),
            ),
          ],
        ),
      ),
    );
  }

  void _emailValidation() {
    final email = _emailTextController.text;
    // バリデーションチェック
    // 正規表現にemailがマッチしたらtrueを返す
    if (RegExp(
        r"/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)")
        .hasMatch(email)) {
      // メールの形式が正しい時の処理
    } else {
      // メールの形式が正しくない時の処理(エラーダイアログの表示など)
    }
  }
}

最後に

最初訳わかんない文字列が並んでたのでビビってましたが、
正規表現怖くない！！