表单开发技术求助：实现验证、数据对象化及指定次数内容展示功能

你的代码存在逻辑冲突、语法错误等问题，以下是完全满足需求的修正版实现：

修正后的HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/form.css">
    <title>Form</title>
</head>
<body>
    <form action="#" method="post" id="my-form">
        <fieldset>
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname">
            
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lname">
            
            <label for="age">Age</label>
            <input type="text" id="age" name="age">
            
            <label for="language">Language</label>
            <select id="language" name="language">
                <option value="english">English</option>
                <option value="spanish">Spanish</option>
                <option value="french">French</option>
                <option value="mandarin">Mandarin</option>
            </select>
            
            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">
            
            <input type="submit" id="submit-btn" value="Submit">
        </fieldset>
    </form>
    
    <div id="myDiv" name="myDiv"></div>
    
    <script src="js/midterm.js"></script>
</body>
</html>

修正后的JavaScript代码 #

let person;

function handleFormSubmit(e) {
    'use strict';
    // 阻止表单默认提交行为
    e.preventDefault();

    // 获取所有表单字段值，去除首尾空格
    const fname = document.getElementById('fname').value.trim();
    const lname = document.getElementById('lname').value.trim();
    const age = document.getElementById('age').value.trim();
    const language = document.getElementById('language').value;
    const email = document.getElementById('email').value.trim();

    // 表单必填项验证
    if (!fname || !lname || !age || !email) {
        alert("请填写所有必填字段。");
        return;
    }

    // 创建完整用户对象
    person = {
        fname,
        lname,
        age,
        language,
        email
    };

    // 执行后续输入与展示逻辑
    collectAdditionalInputAndDisplay();

    // 重置表单至初始状态
    document.getElementById('my-form').reset();
}

function collectAdditionalInputAndDisplay() {
    'use strict';
    let number;
    // 循环获取2-10的有效数字输入
    do {
        number = parseInt(prompt("请输入一个2-10之间的数字"), 10);
    } while (isNaN(number) || number < 2 || number > 10);

    // 获取用户输入的单词
    const chosenWord = prompt("请输入任意一个单词").trim();
    if (!chosenWord) {
        alert("请输入有效的单词");
        return;
    }

    // 构建展示内容
    let displayContent = `用户信息：${person.fname} ${person.lname}，年龄：${person.age}，邮箱：${person.email}，语言：${person.language}<br>`;
    displayContent += `重复展示单词：`;
    for (let i = 0; i < number; i++) {
        displayContent += `${chosenWord}(${i+1}) `;
    }

    // 更新页面展示区域
    document.getElementById('myDiv').innerHTML = displayContent;
}

function init() {
    'use strict';
    // 统一绑定表单提交事件，避免事件冲突
    document.getElementById('my-form').addEventListener('submit', handleFormSubmit);
}

window.onload = init;

关键修改说明 #

• 事件逻辑整合：移除按钮单独的点击事件，统一在表单submit事件中处理所有流程，用e.preventDefault()彻底阻止默认提交行为，替代action="#"的弱阻止方式。
• 完善表单处理：补充获取下拉框language的值，完善用户对象；添加trim()处理输入空格，避免空字符绕过验证。
• 修复数字输入错误：将prompt返回的字符串转为整数，用isNaN()判断有效性，修正原代码中input.value的错误调用（prompt返回的是字符串而非DOM元素）。
• 规范变量声明：所有局部变量添加let/const声明，避免全局变量污染。
• 实现表单重置：在流程完成后调用form.reset()，确保表单恢复初始状态。
• 优化展示内容：用模板字符串拼接内容，添加清晰的文本说明，提升页面展示可读性。

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