javascript バリデーションエラーについて

https://www.youtube.com/watch?v=HzJngc-Se9Q
youtubeの動画を参考に、inputタグでメールアドレスを記入して、正規表現で正しいメールアドレスが記入されていたら、submitしなくてもにリアルタイムでバリデーションチェックを表示したいのですが、正しいメールアドレスを入力しても、if文の方がtrueにはならず、falseで書いた表示しかされません。
おそらくですが、getElementById('email').valueが取得できてない気がします。
解決方法を教えていただけませんか？よろしくお願いします。

HTML

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- <link rel="stylesheet" href="layout.css" /> -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <style>
        .container {
            max-width: 1240px;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <div class="container">
            <form id="form" action="" method="post">
                <div class="row">
                    <div class="input_area">
                        <input type="text" class="pl-0" name="username" placeholder="ユーザーネーム" maxlength="20">
                    </div>
                    <span></span>
                    <div class="input_area">
                        <input type="email" id="email" class="pl-0" name="email" placeholder="メールアドレス" maxlength="50" onkeydown="check_email()">
                    </div>
                    <span id="check_email"></span>
                    <div class="input_area">
                        <input type="password" class="pl-0" name="password" placeholder="パスワード" maxlength="20">
                    </div>
                    <div class="input_area ">
                        <button type="button" class="btn btn-primary text-center p-3">新規登録</button>
                    </div>

            </form>
        </div>
    </div>
    </div>

javascript
<script>
        function check_email() {
            let form = document.getElementById('form');
            let email = document.getElementById('email').value;

            let check_email = document.getElementById('check_email');
            let pattern = "/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/";

            if (email.match(pattern)) {
                form.classList.add('valid');
                form.classList.remove('invalid');
                check_email.innerHTML = '有効なメールアドレスです。';
                check_email.style.color = '#00ff00';
            } else {
                form.classList.remove('valid');
                form.classList.add('invalid');
                check_email.innerHTML = 'メールアドレスを入力してください。';
                check_email.style.color = '#ff0000';
            }
        }
        console.log(email);
    </script>

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1 let pattern = "/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/"
2↓↓↓
3 let pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/
4```