作业中如何使用.focus方法？需修复邮箱验证代码实现错误信息相关功能

我需要修复代码，在错误信息的innerHTML相关逻辑中使用.focus方法。作为校外学生，我尝试了多种方案但没解决，讲师也没提供帮助。

现有代码片段：

if (validateEmail(email)) {
    errorMsg.textContent = '';
    emailInput.classList.remove('error');
    // Do something with the valid email address
} else {
    errorMsg.textContent = 'Invalid email address.';
    emailInput.classList.add('error');
    emailInput.focus();
}
});

function validateEmail(email) {
    const regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    return regex.test(email);

修复方案 #

你的代码里已调用emailInput.focus()，若要关联错误信息的innerHTML逻辑，只需把errorMsg.textContent替换为errorMsg.innerHTML（如果需要在错误信息中插入HTML内容），同时要确保DOM元素引用正确，避免获取失败问题。另外要注意补全代码缺失的闭合语法。

修正后的完整逻辑示例：

// 先确保正确获取DOM元素
const emailInput = document.getElementById('email'); // 替换为你的输入框实际ID
const errorMsg = document.getElementById('error-msg'); // 替换为你的错误信息容器实际ID

// 验证逻辑
if (validateEmail(emailInput.value)) {
    errorMsg.innerHTML = '';
    emailInput.classList.remove('error');
    // 处理合法邮箱的后续逻辑
} else {
    errorMsg.innerHTML = '<span style="color: #dc2626;">无效的邮箱地址。</span>'; // 示例HTML格式错误提示
    emailInput.classList.add('error');
    emailInput.focus();
}

function validateEmail(email) {
    const regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
    return regex.test(email);
}

关键注意点 #

• 必须保证emailInput和errorMsg是正确获取到的DOM元素，否则focus()和innerHTML都会失效
• 若不需要HTML格式的错误提示，用textContent比innerHTML更安全（避免XSS风险），仅当需要插入HTML内容时使用innerHTML
• 检查代码语法完整性，你提供的片段末尾缺少了闭合validateEmail函数的}

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