JavaScriptでフォームバリデーションを行う方法

<!-- 追加(ここから) -->
<div>
    <label for="tel">電話番号:</label>
    <input type="tel" id="tel" name="tel"> 
</div>
<!-- 追加(ここまで) -->

<script type="text/javascript">
    var telInput = document.getElementById('tel');
    var telValue = telInput.value.trim();

    var telRegex = /^0\d{1,4}-\d{1,4}-\d{3,4}$|^0\d{9,10}$|^\d{2,4}-\d{2,4}-\d{3,4}$/;

    if(!telRegex.test(telValue)){
        //エラー処理
    }else{
        //正しい形式のときの処理
    }
</script>

var passwordInput = document.getElementById('password');
var password = passwordInput.value;

var passwordRegex = /^(?=.*?[A-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,}$/;

if(!passwordRegex.test(password)){
    //エラー処理
}else{
    //正しい形式の場合の処理
}

<!-- HTML部分 -->
<form id="myForm">
    <div>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email">
    </div>
    <div>
        <label for="tel">電話番号:</label>
        <input type="tel" id="tel" name="tel">            
    </div>
    <div>
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password">
    </div>
    <button type="submit">送信</button>
</form>


<!-- JavaScript部分 -->
<script type="text/javascript">
    const form = document.getElementById('myForm');
    const nameInput = document.getElementById('name');
    const emailInput = document.getElementById('email');
    const telInput = document.getElementById('tel');
    const passwordInput = document.getElementById('password');


    form.addEventListener('submit', (e) => {
        e.preventDefault();

        const nameValue = nameInput.value.trim();
        const emailValue = emailInput.value.trim();
        const telValue = telInput.value.trim();
        const passwordValue = passwordInput.value;

        // 名前の入力チェック
        if (nameValue === '') {
            alert('名前を入力してください');
            return;
        }

        // メールアドレスの形式チェック
        const emailRegex = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!emailRegex.test(emailValue)) {
            alert('有効なメールアドレスを入力してください');
            return;
        }

        // 電話番号の形式チェック
        const telRegex = /^0\d{9,10}$/;
        if (!telRegex.test(telValue)) {
            alert('有効な電話番号を入力してください');
            return;
        }

        // パスワードの複雑性チェック
        const passwordRegex = /^(?=.*?[A-Z])(?=.*?[0-9])[a-zA-Z0-9]{8,}$/;
        if (!passwordRegex.test(passwordValue)) {
            alert('パスワードは大文字と数字を含む8文字以上で設定してください');
            return;
        }

        // フォームの送信
        form.submit();
    });
</script>