フロントエンドでjavascriptを用いる際のテンプレート部品

webページの部品のまとめ

フォームが空欄の時にエラーを出す

        <div class="frame__inner">
            <p>メールアドレス:<input type="email" name="email" id="">
            <span style="color: #f33"></span>
            </p>
            <script>
                const email = document.querySelector('input[name="email"]')
                email.addEventListener('blur', () => {
                    if (email.value === '') {
                        email.style.backgroundColor = '#fcc';
                        email.nextElementSibling.innerHTML = '※ メールアドレスをご記入ください';
                    } else {
                        email.style.backgroundColor = '#fff';
                        email.nextElementSibling.innerHTML = '';
                    }
                });
            </script>
        </div>

チェックボックスにチェックがついたら、ボタンを押す

        <div class="frame__inner">
            <div><label><input type="checkbox" name="agree" id="agree"> 同意する</label></div>
            <div><button id="submit" disabled>送信する</button></div>
            <!-- ここに、JavaScriptを記述します -->
            <script>
                const agree = document.getElementById('agree');
                agree.addEventListener('change', () => {
                    //※以下は同じ動作をするもの
                    // if (agree.checked) {
                    //     document.getElementById('submit').disabled = false;
                    // } else {
                    //     document.getElementById('submit').disabled = true;
                    // }
                    document.getElementById('submit').disabled = !agree.checked;
                });
            </script>
        </div>

正規表現を使ったバリデーションチェック

        <div class="frame__inner">
            <!-- ここに、JavaScriptを記述します -->
            <script>
                const zip_pattern = /^\d{3}-?\d{4}$/g;
                let zip = '111-2222';

                if (zip_pattern.test(zip)) {
                    document.write('正しく入力されました');
                } else {
                    document.write('郵便番号は xxx-xxxxの書式で入力してください');
                }
            </script>
        </div>

• 正規表現.test(変数)で変数が正規表現のパターン通りに入力されているか調べることが出来る
• 正規表現の補足
  • /正規表現を入力/g:が入力のパターン
  • \dで数字
  • ^で文頭指定
  • $で文末指定
  • ?で直前の文字が0回もしくは1回だけ登場

クリックしたときに別のURLに誘導する

       <script>
           location.href = 'https://google.co.jp';
       </script>

リアルタイム表示する

        <div class="frame__inner">
            <div id="timer"></div>
            <script>
            
                let timer = () => {
                    let now = new Date();
                    document.getElementById('timer').innerHTML =
                        `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
                }

                let timerID = setInterval(timer, 50);
            </script>
        </div>
    </div>