HTML元素焦点切换方法及表单验证作业实现咨询

嘿，我来帮你搞定这个作业需求，顺便解答焦点切换的问题！

先给你一个完整的可运行代码示例，包含所有要求的功能，之后我会逐个拆解细节：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Validation Demo</title>
    <style>
        .success { color: green; font-weight: bold; }
        .error { color: red; font-weight: bold; }
        .form-group { margin: 15px 0; }
        label { display: block; margin-bottom: 5px; }
        input { padding: 8px; width: 300px; }
        button:disabled { background-color: #ccc; cursor: not-allowed; }
    </style>
</head>
<body>
    <form id="userForm">
        <div class="form-group">
            <label for="email">邮箱地址:</label>
            <input type="email" id="email" placeholder="请输入你的邮箱">
            <div id="emailFeedback"></div>
        </div>
        
        <div class="form-group">
            <label for="phone">电话号码:</label>
            <input type="text" id="phone" placeholder="你的电话号码" disabled>
            <div id="phoneFeedback"></div>
        </div>
        
        <div class="form-group">
            <button type="submit" id="submitBtn" disabled>提交</button>
        </div>
    </form>

    <script>
        const emailInput = document.getElementById('email');
        const phoneInput = document.getElementById('phone');
        const submitBtn = document.getElementById('submitBtn');
        const emailFeedback = document.getElementById('emailFeedback');
        const phoneFeedback = document.getElementById('phoneFeedback');

        // 邮箱验证：用户离开输入框时触发
        emailInput.addEventListener('blur', function() {
            const email = this.value.trim();
            // 基础验证@和.的存在，实际项目可以用更严谨的正则
            if (email.includes('@') && email.includes('.')) {
                emailFeedback.textContent = '邮箱格式正确！';
                emailFeedback.className = 'success';
                // 验证通过后启用电话输入框
                phoneInput.disabled = false;
            } else {
                emailFeedback.textContent = '请输入包含@和.的有效邮箱！';
                emailFeedback.className = 'error';
                phoneInput.disabled = true;
                submitBtn.disabled = true;
            }
        });

        // 电话号码验证：用户离开输入框时触发
        phoneInput.addEventListener('blur', function() {
            const phone = this.value.trim();
            // 验证10位纯数字，无特殊字符
            const phoneRegex = /^[0-9]{10}$/;
            if (phoneRegex.test(phone)) {
                phoneFeedback.textContent = '电话号码格式正确！';
                phoneFeedback.className = 'success';
                // 验证通过后启用提交按钮
                submitBtn.disabled = false;
            } else {
                phoneFeedback.textContent = '请输入10位纯数字的电话号码！';
                phoneFeedback.className = 'error';
                submitBtn.disabled = true;
            }
        });

        // 提交按钮响应逻辑
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止表单默认刷新提交行为
            alert('表单提交成功！邮箱：' + emailInput.value + '，电话：' + phoneInput.value);
            // 这里可以替换为实际的提交逻辑，比如发送数据到服务器
        });
    </script>
</body>
</html>

逐个拆解需求实现细节 #

1. 表单元素设置 #

• 激活状态的邮箱输入框：直接使用type="email"的<input>，默认就是可输入的激活状态。
• 禁用状态的电话输入框/提交按钮：给元素添加disabled属性，初始状态下无法交互。
• 我额外加了简单的CSS样式，让反馈信息和禁用状态的视觉效果更直观。

2. 验证逻辑实现 #

• 邮箱验证：监听blur事件（用户点击离开输入框时触发），检查输入值是否同时包含@和.。验证通过后自动启用电话输入框，失败则保持禁用。
• 电话号码验证：同样监听blur事件，用正则表达式/^[0-9]{10}$/验证是否为10位纯数字。验证通过后启用提交按钮，失败则禁用。
• 反馈信息通过修改<div>的文本内容和类名来区分成功/失败状态，用颜色增强辨识度。

3. 提交按钮响应 #

给提交按钮添加click事件监听器，先用e.preventDefault()阻止表单默认的页面刷新行为，然后可以添加自定义逻辑（比如弹出提示、发送AJAX请求等）。

关于HTML中切换元素焦点的方法 #

切换元素焦点主要有三种常用方式：

1. 使用JavaScript的focus()方法 #

直接获取DOM元素后调用focus()，就能让它获得焦点。比如：

// 页面加载后让邮箱输入框自动聚焦
window.addEventListener('load', function() {
    document.getElementById('email').focus();
});

// 邮箱验证通过后，自动切换到电话输入框
emailInput.addEventListener('blur', function() {
    if (this.value.includes('@') && this.value.includes('.')) {
        phoneInput.disabled = false;
        phoneInput.focus(); // 自动跳转焦点到电话框
    }
});

2. 使用HTML的autofocus属性 #

如果想让页面加载时某个元素自动获得焦点，直接给元素加autofocus属性即可：

<input type="email" id="email" placeholder="请输入你的邮箱" autofocus>

3. 用tabindex控制焦点顺序 #

默认按Tab键会按照元素在HTML中的顺序切换焦点，想自定义顺序可以用tabindex：

• tabindex="0"：元素纳入默认Tab顺序
• tabindex="正数"：数值越大，Tab顺序越靠后
• tabindex="-1"：无法通过Tab键聚焦，但可以用focus()方法设置

比如：

<input type="text" id="phone" tabindex="2">
<input type="email" id="email" tabindex="1">

这样按Tab键会先聚焦邮箱，再聚焦电话，和HTML代码顺序相反。

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