javaScript 正規表現　お問い合わせフォーム　のメモ

<h1>お問い合わせフォームのメモ</h1>
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .form-line {
            margin-bottom: 10px;
        }
        .form-line label {
            display: block;
        }
        .form-line .text-error {
            display: block;
            color: red;
        }
    </style>
</head>
<body>

<form action="" method="" novalidate>

    <div class="form-line form_onamae">
        <label>名前</label>
        <input type="text" name="" value="">
        <span class="text-error"></span>
    </div>

    <div class="form-line form_hurigana">
        <label>ふりがな</label>
        <input type="text" name="" value="">
        <span class="text-error"> </span>
<!--        ここに未入力の時１０文字以上の時　文字を表示させる-->
    </div>

    <div class="form-line form_tel">
        <label>電話番号</label>
        <input type="text" name="" value="">
        <span class="text-error"></span>
    </div>

    <div class="form-line form_email">
        <label>メールアドレス</label>
        <input type="email" name="" value="">
        <span class="text-error"></span>
    </div>

</form>

<div class="form-line">
    <input type="submit" name="" value="送信">
</div>

<script>

    let input_onamae = document.querySelector('.form_onamae input');
    let text_oaname = document.querySelector('.form_onamae .text-error');
    // 下の書き方覚える　form-lineの中のinputの中のtypeのsubmit inputは閉じタグないのでこの書き方

    let btn = document.querySelector(".form-line input[type='submit']");
    btn.addEventListener('click', function () {

        if ( ! input_onamae.value ) {
            console.log('入力が必須です');
            // 値の書き換え
            text_oaname.textContent = "入力が必須です";
            // text_oaname.innerHTML = "<b>入力が必須です</b>";
        }
    })

    // 名前10文字以内
    btn.addEventListener('click', function () {

        if(input_onamae.value.length > 10){
            console.log("文字数オーバー")
            text_oaname.textContent = "文字数オーバー";
        }
    })
    // ふりがな
    let input_hurigana = document.querySelector('.form_hurigana input');
    let text_hurigana = document.querySelector('.form_hurigana .text-error');


    btn.addEventListener('click', function () {

        if (!input_hurigana.value) {
            console.log('入力が必須です');
            // 値の書き換え
            text_hurigana.textContent = "入力が必須です";
        }
    })


    btn.addEventListener('click', function () {

        if(input_hurigana.value.length > 20){
            console.log("文字数オーバー")
            text_hurigana.textContent = "文字数オーバー";
        }
    })
    // 電話

    let input_tel = document.querySelector('.form_tel input');
    let text_tel = document.querySelector('.form_tel .text-error');

    btn.addEventListener('click', function () {

        if (!input_tel.value) {
            console.log('入力が必須です');
            // 値の書き換え
            text_tel.textContent = "入力が必須です";
        }
    })


    btn.addEventListener('click', function () {
// 数字をStringで文字列にして１２文字以上だとメッセージが出るようにしてある
        if(String(input_tel.value).length > 12){
            console.log("12桁以内で入力してください")
            text_tel.textContent = "12桁以内で入力してください";
        }
    })


// メール
    let input_email = document.querySelector('.form_email input');
    let text_email = document.querySelector('.form_email .text-error');


    btn.addEventListener('click', function () {

        if (!input_email.value) {
            console.log('入力が必須です');
            // 値の書き換え
            text_email.textContent = "入力が必須です";
        }

        else if(!input_email.value.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)) {
            console.log("メールアドレスが正しくありません");
            text_email.textContent = "メールアドレスが正しくありません"
        }
    })



</script>

</body>
</html>
```
<p>pタグで書くとコメント書ける</p>