注册表单邮箱格式验证功能实现问题求助

我有一个新闻通讯注册字段，现有JavaScript代码可在点击按钮时，若字段为空则显示错误提示，非空则显示成功提示，该代码运行正常。但我尝试添加邮箱地址格式验证功能却未能成功。以下是对应的代码：

对应的HTML代码 #

<style>
        .error {color: #fff; text-align: left;}
        .hide {display: none !important;;}
        .show {display: block !important;}
</style>

<div>
    <div class="max-w-3xl text-center mx-auto">
        <h2 class="text-xl text-center normal-case">Get The VIP Treatment</h2>
        <p class="text-lg text-center">Join the Whittard family to receive access to exciting promotions, new products, recipes, competitions, and more.</p>
    <div>
    <!-- Form elements go here: Style as you wish -->

    <div id="newsletter-signup">
    <table class="mb-0">
        <tbody class="bg-[#3F5562] border-none grid grid-cols-1">
            <p id="newsletter-confirmation" class="text-lg text-center hidden">Thank you for signing up!</p>
        <tr class="w-full font-['AvenirLTStd-Medium'] text-base bg-[#3F5562] block">
            <th class="hidden">Email address</th>

            <td class="font-['AvenirLTStd-Medium'] text-base block pb-0">
                <input id="email" class="mb-0" name="ue" type="text" value="" placeholder="Email address*" required />
                <p id="newsletter-no-email" class="text-lg text-center m-0 hidden">Please enter a valid e-mail address</p>
            </td>
        </tr>
        </tbody>
    </table>
    <input id="signupbutton" class="signup hover:bg-[#14679e] hover:ease-out hover:cursor-pointer text-white max-w-[200px] bg-[#435764] font-normal font-['AvenirLTStd-Medium'] border border-solid border-[#8196a1] rounded-sm tracking-wider transition duration-300 ease-in text-lg px-6 py-2 mt-2" type="submit" value="Sign Up" style="padding: 5px 20px;" name="submit" />
</div>
    <!-- End of form elements -->
</form>

当前可用的JavaScript代码（仅验证空值） #

//Newsletter Confirmation
document.querySelector ( '#signupbutton' ).addEventListener('click',function() {
        if( document.querySelector('#email').value.length == 0) {
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'show' );
        }else{
        document.querySelector('#email').classList.toggle('hide');
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'hide' );
        document.querySelector( '#newsletter-confirmation' ).classList.toggle( 'show' );
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'hide' );
    document.querySelector( '#newsletter-no-email' ).classList.remove( 'show' );
        }
    });

尝试的无效JavaScript代码（添加邮箱验证失败） #

//Newsletter Confirmation
document.querySelector ( '#signupbutton' ).addEventListener('click',function() {
        if( document.querySelector('#email').value.length == 0 || document.querySelector('#email').value == /^(([^<>()\\[\\].,;:\\s@\"]+(\\.[^<>()\\[\\].,;:\\s@\"]+)*)|(\".+\"))@(([^<>()\\[\\].,;:\\s@\"]+\\.)+[^<>()\\[\\].,;:\\s@\"]{2,})$/iu ) {
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'show' );
        }else{
        document.querySelector('#email').classList.toggle('hide');
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'hide' );
        document.querySelector( '#newsletter-confirmation' ).classList.toggle( 'show' );
        document.querySelector( '#newsletter-no-email' ).classList.toggle( 'hide' );
        document.querySelector( '#newsletter-no-email' ).classList.remove( 'show' );
        }
    });

问题原因分析 #

你尝试的代码出错的核心原因是：直接用==将字符串和正则表达式对象比较，这永远不会返回true。验证字符串是否匹配正则，应该使用正则对象的test()方法。另外，原代码中classList.toggle的使用存在冗余，多次重复切换同一个元素的hide类，容易导致状态混乱。

修正后的JavaScript代码 #

//Newsletter Confirmation
document.querySelector('#signupbutton').addEventListener('click', function() {
    const emailInput = document.querySelector('#email');
    const emailValue = emailInput.value.trim(); // 去除首尾空格，避免纯空格误判
    const errorMsg = document.querySelector('#newsletter-no-email');
    const successMsg = document.querySelector('#newsletter-confirmation');
    
    // 邮箱格式正则表达式
    const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;

    // 先重置所有元素状态，避免之前的状态干扰当前判断
    errorMsg.classList.remove('show');
    errorMsg.classList.add('hide');
    successMsg.classList.remove('show');
    successMsg.classList.add('hide');
    emailInput.classList.remove('hide');

    if (!emailValue || !emailRegex.test(emailValue)) {
        // 空值或格式错误，显示错误提示
        errorMsg.classList.remove('hide');
        errorMsg.classList.add('show');
    } else {
        // 验证通过，隐藏输入框并显示成功提示
        emailInput.classList.add('hide');
        successMsg.classList.remove('hide');
        successMsg.classList.add('show');
    }
});

关键修改点 #

1. 正则验证逻辑：使用emailRegex.test(emailValue)判断邮箱格式是否正确，替代错误的字符串与正则对象比较方式。
2. 状态重置：每次点击按钮先重置所有元素的显示状态，避免历史状态影响当前验证结果。
3. 输入处理：用trim()去除输入值首尾空格，避免用户输入纯空格被误判为有效内容。
4. 简化Class操作：用add和remove明确控制元素的显示/隐藏状态，比toggle更稳定，避免重复操作导致的状态反转。

内容的提问来源于stack exchange，提问作者UXLou