面试题：JavaScript 复杂表单联动验证

假设有一个包含多个输入框的表单，其中有年龄输入框、职业选择下拉框（选项有学生、上班族、退休人员等）。如果选择职业为学生，年龄必须在6到25岁之间；如果是上班族，年龄需在18到60岁之间；退休人员年龄需大于60岁。请使用JavaScript实现该表单联动验证逻辑，确保用户输入符合这些规则。

29.9万热度

难度

编程语言JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form id="myForm">
        <label for="age">年龄:</label>
        <input type="number" id="age" required>
        <br>
        <label for="occupation">职业:</label>
        <select id="occupation" required>
            <option value="学生">学生</option>
            <option value="上班族">上班族</option>
            <option value="退休人员">退休人员</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>
    <script>
        const form = document.getElementById('myForm');
        form.addEventListener('submit', function (e) {
            const ageInput = document.getElementById('age');
            const occupationSelect = document.getElementById('occupation');
            const age = parseInt(ageInput.value);
            const occupation = occupationSelect.value;
            let isValid = true;
            if (occupation === '学生') {
                if (age < 6 || age > 25) {
                    isValid = false;
                    alert('学生的年龄必须在6到25岁之间');
                }
            } else if (occupation === '上班族') {
                if (age < 18 || age > 60) {
                    isValid = false;
                    alert('上班族的年龄需在18到60岁之间');
                }
            } else if (occupation === '退休人员') {
                if (age <= 60) {
                    isValid = false;
                    alert('退休人员年龄需大于60岁');
                }
            }
            if (!isValid) {
                e.preventDefault();
            }
        });
    </script>
</body>

</html>

星途面试题库

面试题：JavaScript 复杂表单联动验证

知识考点

面试题答案