如何用JavaScript实现分步表单输入框按回车触发切换验证？

要实现回车键触发和点击箭头相同的切换验证逻辑，只需给所有输入框添加回车键监听事件，复用已有的验证和切换逻辑即可，具体修改如下：

修改后的app.js代码 #

function animatedForm() {
    const arrows = document.querySelectorAll('.fa-arrow-right');
    const inputs = document.querySelectorAll('input'); // 获取所有输入框
    
    // 原有的箭头点击逻辑保持不变
    arrows.forEach(arrow => {
        arrow.addEventListener("click", handleInputSubmit);
    });

    // 为每个输入框添加回车键监听
    inputs.forEach(input => {
        input.addEventListener("keydown", (e) => {
            // 判断是否按下回车键（keyCode 13）
            if (e.keyCode === 13) {
                const arrow = input.nextElementSibling;
                handleInputSubmit.call(arrow); // 调用复用的处理函数，绑定箭头元素为this
            }
        });
    });

    // 提取共用的验证切换逻辑为独立函数
    function handleInputSubmit() {
        const input = this.previousElementSibling;
        const parent = this.parentElement;
        const nextForm = parent.nextElementSibling;

        // 验证逻辑保持不变
        if(input.type === "text" && validateUser(input)){
            nextSlide(parent, nextForm);
        } else if(input.type === 'email' && validateEmail(input)){
            nextSlide(parent, nextForm);
        } else if(input.type === 'password' && validateUser(input)){
            nextSlide(parent, nextForm);
        } else {
            parent.style.animation = "shake 0.5s ease";
        };
        // 动画重置逻辑，添加once避免重复绑定
        parent.addEventListener('animationend', () => {
            parent.style.animation = "";
        }, { once: true });
    }
}

// 以下原有函数保持不变
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87)"); // 补全缺失的右括号
    } else {
        error("rgb(87, 189, 130)"); // 补全缺失的右括号
        return true;
    }
}

function validateEmail(email){
    const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130)"); // 补全缺失的右括号
        return true;
    } else {
        error("rgb(189,87,87)"); // 补全缺失的右括号
    }
}

function nextSlide(parent, nextForm){
    parent.classList.add('inactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

function error(color){
    document.body.style.backgroundColor = color;
}

animatedForm();

关键改动说明 #

• 提取handleInputSubmit函数，将原箭头点击的验证切换逻辑复用，避免重复代码
• 为所有输入框添加keydown事件监听，检测回车键（keyCode === 13），触发时找到对应箭头并调用共用逻辑
• 修复了原有error函数调用中缺失的右括号问题
• 为animationend事件添加{ once: true }选项，避免同一元素重复绑定事件导致的多次触发

内容的提问来源于stack exchange，提问作者Alex m.