{"id":252,"date":"2026-03-16T23:18:23","date_gmt":"2026-03-16T15:18:23","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=252"},"modified":"2026-03-16T23:18:23","modified_gmt":"2026-03-16T15:18:23","slug":"day-12-%e8%a1%a8%e5%8d%95%e5%a4%84%e7%90%86","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=252","title":{"rendered":"Day-12-\u8868\u5355\u5904\u7406"},"content":{"rendered":"

Day 12: \u8868\u5355\u5904\u7406<\/h1>\n
\n

DOM \u64cd\u4f5c – \u7b2c3\u5929<\/strong><\/p>\n<\/blockquote>\n

\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n
    \n
  • \u7406\u89e3 HTML \u8868\u5355\u7684\u57fa\u672c\u7ed3\u6784<\/li>\n
  • \u638c\u63e1\u8868\u5355\u5143\u7d20\u7684\u8bbf\u95ee\u548c\u64cd\u4f5c<\/li>\n
  • \u5b66\u4f1a\u83b7\u53d6\u548c\u9a8c\u8bc1\u7528\u6237\u8f93\u5165<\/li>\n
  • \u5b9e\u73b0\u8868\u5355\u6570\u636e\u7684\u63d0\u4ea4\u548c\u5904\u7406<\/li>\n<\/ul>\n

    \ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n

    \u4ec0\u4e48\u662f\u8868\u5355\uff1f<\/h3>\n

    \u8868\u5355\uff08Form\uff09<\/strong> \u662f\u7f51\u9875\u4e0a\u6536\u96c6\u7528\u6237\u8f93\u5165\u7684\u4e3b\u8981\u65b9\u5f0f\uff0c\u5e38\u89c1\u573a\u666f\u5305\u62ec\uff1a<\/p>\n

      \n
    • \u7528\u6237\u767b\u5f55\/\u6ce8\u518c<\/li>\n
    • \u641c\u7d22\u6846<\/li>\n
    • \u8bc4\u8bba\u53cd\u9988<\/li>\n
    • \u5728\u7ebf\u95ee\u5377<\/li>\n
    • \u8d2d\u7269\u8f66\u7ed3\u7b97<\/li>\n<\/ul>\n

      \u8868\u5355\u7684\u57fa\u672c\u7ed3\u6784<\/h3>\n
      <form id="myForm" action="\/submit" method="POST">\n    <!-- \u8868\u5355\u5143\u7d20 -->\n    <input type="text" name="username" placeholder="\u7528\u6237\u540d">\n    <input type="password" name="password" placeholder="\u5bc6\u7801">\n    <button type="submit">\u63d0\u4ea4<\/button>\n<\/form>\n<\/code><\/pre>\n
      \u91cd\u8981\u5c5e\u6027<\/strong>\uff1a<\/p>\n
        \n
      • action<\/code>: \u8868\u5355\u63d0\u4ea4\u7684 URL<\/li>\n
      • method<\/code>: \u63d0\u4ea4\u65b9\u5f0f\uff08GET \u6216 POST\uff09<\/li>\n
      • id<\/code>: \u552f\u4e00\u6807\u8bc6\u7b26\uff08\u7528\u4e8e JavaScript \u64cd\u4f5c\uff09<\/li>\n<\/ul>\n
        \u5e38\u89c1\u8868\u5355\u5143\u7d20<\/h3>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
        \u5143\u7d20<\/th>\ntype \u503c<\/th>\n\u7528\u9014<\/th>\n<\/tr>\n<\/thead>\n
        <input><\/code><\/td>\ntext<\/td>\n\u5355\u884c\u6587\u672c<\/td>\n<\/tr>\n
        <input><\/code><\/td>\npassword<\/td>\n\u5bc6\u7801\uff08\u9690\u85cf\u8f93\u5165\uff09<\/td>\n<\/tr>\n
        <input><\/code><\/td>\nemail<\/td>\n\u90ae\u7bb1\u5730\u5740<\/td>\n<\/tr>\n
        <input><\/code><\/td>\nnumber<\/td>\n\u6570\u5b57<\/td>\n<\/tr>\n
        <input><\/code><\/td>\ncheckbox<\/td>\n\u590d\u9009\u6846<\/td>\n<\/tr>\n
        <input><\/code><\/td>\nradio<\/td>\n\u5355\u9009\u6309\u94ae<\/td>\n<\/tr>\n
        <select><\/code><\/td>\n–<\/td>\n\u4e0b\u62c9\u5217\u8868<\/td>\n<\/tr>\n
        <textarea><\/code><\/td>\n–<\/td>\n\u591a\u884c\u6587\u672c<\/td>\n<\/tr>\n
        <button><\/code><\/td>\nsubmit<\/td>\n\u63d0\u4ea4\u6309\u94ae<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
        \ud83d\udcdd DOM \u64cd\u4f5c\uff1a\u8bbf\u95ee\u8868\u5355\u5143\u7d20<\/h2>\n
        \u65b9\u6cd5 1\uff1a\u901a\u8fc7 ID \u83b7\u53d6<\/h3>\n
        \/\/ \u83b7\u53d6\u5355\u4e2a\u5143\u7d20\nconst usernameInput = document.getElementById('username');\n\n\/\/ \u83b7\u53d6\u503c\nconst value = usernameInput.value;\nconsole.log(value);\n\n\/\/ \u8bbe\u7f6e\u503c\nusernameInput.value = '\u65b0\u503c';\n<\/code><\/pre>\n
        \u65b9\u6cd5 2\uff1a\u901a\u8fc7\u8868\u5355\u7684 elements \u96c6\u5408<\/h3>\n
        const form = document.getElementById('myForm');\n\n\/\/ \u901a\u8fc7 name \u5c5e\u6027\u83b7\u53d6\nconst username = form.elements.username;\n\/\/ \u6216\nconst username = form.elements['username'];\n\n\/\/ \u901a\u8fc7\u7d22\u5f15\u83b7\u53d6\nconst firstInput = form.elements[0];\n<\/code><\/pre>\n
        \u65b9\u6cd5 3\uff1a\u901a\u8fc7 querySelector<\/h3>\n
        \/\/ \u83b7\u53d6\u5355\u4e2a\u5143\u7d20\nconst input = document.querySelector('#username');\n\n\/\/ \u83b7\u53d6\u7279\u5b9a\u7c7b\u578b\u7684\u8f93\u5165\u6846\nconst textInputs = document.querySelectorAll('input[type="text"]');\n\n\/\/ \u83b7\u53d6\u6240\u6709\u9009\u4e2d\u7684\u590d\u9009\u6846\nconst checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');\n<\/code><\/pre>\n
        \ud83c\udfae \u5b9e\u6218\u793a\u4f8b<\/h2>\n
        \u793a\u4f8b 1\uff1a\u7528\u6237\u6ce8\u518c\u8868\u5355\u9a8c\u8bc1<\/h3>\n
        <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u7528\u6237\u6ce8\u518c<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 500px;\n            margin: 50px auto;\n            padding: 20px;\n        }\n\n        .form-group {\n            margin-bottom: 15px;\n        }\n\n        label {\n            display: block;\n            margin-bottom: 5px;\n            font-weight: bold;\n        }\n\n        input {\n            width: 100%;\n            padding: 8px;\n            box-sizing: border-box;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        }\n\n        input:focus {\n            outline: none;\n            border-color: #4CAF50;\n        }\n\n        .error {\n            color: red;\n            font-size: 12px;\n            margin-top: 5px;\n            display: none;\n        }\n\n        button {\n            background-color: #4CAF50;\n            color: white;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            width: 100%;\n        }\n\n        button:hover {\n            background-color: #45a049;\n        }\n\n        .success {\n            background-color: #d4edda;\n            color: #155724;\n            padding: 10px;\n            border-radius: 4px;\n            margin-top: 20px;\n            display: none;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2>\u7528\u6237\u6ce8\u518c<\/h2>\n\n    <form id="registerForm">\n        <div class="form-group">\n            <label for="username">\u7528\u6237\u540d\uff1a<\/label>\n            <input type="text" id="username" name="username" placeholder="\u8bf7\u8f93\u5165\u7528\u6237\u540d\uff083-15\u4e2a\u5b57\u7b26\uff09">\n            <div class="error" id="usernameError">\u7528\u6237\u540d\u957f\u5ea6\u5fc5\u987b\u5728 3-15 \u4e2a\u5b57\u7b26\u4e4b\u95f4<\/div>\n        <\/div>\n\n        <div class="form-group">\n            <label for="email">\u90ae\u7bb1\uff1a<\/label>\n            <input type="email" id="email" name="email" placeholder="\u8bf7\u8f93\u5165\u90ae\u7bb1">\n            <div class="error" id="emailError">\u8bf7\u8f93\u5165\u6709\u6548\u7684\u90ae\u7bb1\u5730\u5740<\/div>\n        <\/div>\n\n        <div class="form-group">\n            <label for="password">\u5bc6\u7801\uff1a<\/label>\n            <input type="password" id="password" name="password" placeholder="\u8bf7\u8f93\u5165\u5bc6\u7801\uff08\u81f3\u5c116\u4e2a\u5b57\u7b26\uff09">\n            <div class="error" id="passwordError">\u5bc6\u7801\u957f\u5ea6\u5fc5\u987b\u81f3\u5c11 6 \u4e2a\u5b57\u7b26<\/div>\n        <\/div>\n\n        <div class="form-group">\n            <label for="confirmPassword">\u786e\u8ba4\u5bc6\u7801\uff1a<\/label>\n            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="\u8bf7\u518d\u6b21\u8f93\u5165\u5bc6\u7801">\n            <div class="error" id="confirmError">\u4e24\u6b21\u8f93\u5165\u7684\u5bc6\u7801\u4e0d\u4e00\u81f4<\/div>\n        <\/div>\n\n        <div class="form-group">\n            <label>\n                <input type="checkbox" id="agree" name="agree">\n                \u6211\u540c\u610f\u7528\u6237\u534f\u8bae\n            <\/label>\n            <div class="error" id="agreeError">\u8bf7\u540c\u610f\u7528\u6237\u534f\u8bae<\/div>\n        <\/div>\n\n        <button type="submit">\u6ce8\u518c<\/button>\n    <\/form>\n\n    <div class="success" id="successMessage">\n        \u6ce8\u518c\u6210\u529f\uff01\u6b22\u8fce\u52a0\u5165\u6211\u4eec\u3002\n    <\/div>\n\n    <script>\n        \/\/ \u83b7\u53d6\u8868\u5355\u548c\u5143\u7d20\n        const form = document.getElementById('registerForm');\n        const usernameInput = document.getElementById('username');\n        const emailInput = document.getElementById('email');\n        const passwordInput = document.getElementById('password');\n        const confirmPasswordInput = document.getElementById('confirmPassword');\n        const agreeCheckbox = document.getElementById('agree');\n\n        \/\/ \u663e\u793a\u9519\u8bef\n        function showError(input, errorId) {\n            const errorElement = document.getElementById(errorId);\n            errorElement.style.display = 'block';\n            input.style.borderColor = 'red';\n        }\n\n        \/\/ \u9690\u85cf\u9519\u8bef\n        function hideError(input, errorId) {\n            const errorElement = document.getElementById(errorId);\n            errorElement.style.display = 'none';\n            input.style.borderColor = '#ddd';\n        }\n\n        \/\/ \u9a8c\u8bc1\u7528\u6237\u540d\n        function validateUsername() {\n            const username = usernameInput.value.trim();\n            if (username.length < 3 || username.length > 15) {\n                showError(usernameInput, 'usernameError');\n                return false;\n            }\n            hideError(usernameInput, 'usernameError');\n            return true;\n        }\n\n        \/\/ \u9a8c\u8bc1\u90ae\u7bb1\n        function validateEmail() {\n            const email = emailInput.value.trim();\n            const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n            if (!emailRegex.test(email)) {\n                showError(emailInput, 'emailError');\n                return false;\n            }\n            hideError(emailInput, 'emailError');\n            return true;\n        }\n\n        \/\/ \u9a8c\u8bc1\u5bc6\u7801\n        function validatePassword() {\n            const password = passwordInput.value;\n            if (password.length < 6) {\n                showError(passwordInput, 'passwordError');\n                return false;\n            }\n            hideError(passwordInput, 'passwordError');\n            return true;\n        }\n\n        \/\/ \u9a8c\u8bc1\u786e\u8ba4\u5bc6\u7801\n        function validateConfirmPassword() {\n            const password = passwordInput.value;\n            const confirmPassword = confirmPasswordInput.value;\n            if (password !== confirmPassword) {\n                showError(confirmPasswordInput, 'confirmError');\n                return false;\n            }\n            hideError(confirmPasswordInput, 'confirmError');\n            return true;\n        }\n\n        \/\/ \u9a8c\u8bc1\u534f\u8bae\n        function validateAgree() {\n            if (!agreeCheckbox.checked) {\n                document.getElementById('agreeError').style.display = 'block';\n                return false;\n            }\n            document.getElementById('agreeError').style.display = 'none';\n            return true;\n        }\n\n        \/\/ \u5b9e\u65f6\u9a8c\u8bc1\uff08\u7528\u6237\u8f93\u5165\u65f6\uff09\n        usernameInput.addEventListener('input', validateUsername);\n        emailInput.addEventListener('input', validateEmail);\n        passwordInput.addEventListener('input', validatePassword);\n        confirmPasswordInput.addEventListener('input', validateConfirmPassword);\n        agreeCheckbox.addEventListener('change', validateAgree);\n\n        \/\/ \u8868\u5355\u63d0\u4ea4\u5904\u7406\n        form.addEventListener('submit', function(event) {\n            \/\/ \u963b\u6b62\u9ed8\u8ba4\u63d0\u4ea4\u884c\u4e3a\n            event.preventDefault();\n\n            \/\/ \u9a8c\u8bc1\u6240\u6709\u5b57\u6bb5\n            const isUsernameValid = validateUsername();\n            const isEmailValid = validateEmail();\n            const isPasswordValid = validatePassword();\n            const isConfirmValid = validateConfirmPassword();\n            const isAgreeValid = validateAgree();\n\n            \/\/ \u5982\u679c\u6240\u6709\u9a8c\u8bc1\u90fd\u901a\u8fc7\n            if (isUsernameValid && isEmailValid && isPasswordValid && isConfirmValid && isAgreeValid) {\n                \/\/ \u6536\u96c6\u8868\u5355\u6570\u636e\n                const formData = {\n                    username: usernameInput.value.trim(),\n                    email: emailInput.value.trim(),\n                    password: passwordInput.value\n                };\n\n                \/\/ \u8fd9\u91cc\u53ef\u4ee5\u5c06\u6570\u636e\u53d1\u9001\u5230\u670d\u52a1\u5668\n                console.log('\u6ce8\u518c\u6570\u636e\uff1a', formData);\n\n                \/\/ \u663e\u793a\u6210\u529f\u6d88\u606f\n                document.getElementById('successMessage').style.display = 'block';\n\n                \/\/ \u6e05\u7a7a\u8868\u5355\n                form.reset();\n\n                \/\/ 3\u79d2\u540e\u9690\u85cf\u6210\u529f\u6d88\u606f\n                setTimeout(() => {\n                    document.getElementById('successMessage').style.display = 'none';\n                }, 3000);\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        \u793a\u4f8b 2\uff1a\u641c\u7d22\u6846\u5b9e\u65f6\u8fc7\u6ee4<\/h3>\n
        <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u5b9e\u65f6\u641c\u7d22<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 600px;\n            margin: 50px auto;\n            padding: 20px;\n        }\n\n        .search-box {\n            margin-bottom: 20px;\n        }\n\n        input[type="text"] {\n            width: 100%;\n            padding: 10px;\n            font-size: 16px;\n            border: 2px solid #ddd;\n            border-radius: 5px;\n            box-sizing: border-box;\n        }\n\n        input[type="text"]:focus {\n            outline: none;\n            border-color: #4CAF50;\n        }\n\n        .item-list {\n            list-style: none;\n            padding: 0;\n        }\n\n        .item {\n            padding: 15px;\n            border-bottom: 1px solid #eee;\n            cursor: pointer;\n            transition: background-color 0.2s;\n        }\n\n        .item:hover {\n            background-color: #f5f5f5;\n        }\n\n        .item.hidden {\n            display: none;\n        }\n\n        .item-name {\n            font-weight: bold;\n            margin-bottom: 5px;\n        }\n\n        .item-desc {\n            color: #666;\n            font-size: 14px;\n        }\n\n        .no-results {\n            text-align: center;\n            color: #999;\n            padding: 20px;\n            display: none;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2>\u5b9e\u65f6\u641c\u7d22\u8fc7\u6ee4<\/h2>\n\n    <div class="search-box">\n        <input type="text" id="searchInput" placeholder="\u641c\u7d22...">\n    <\/div>\n\n    <ul class="item-list" id="itemList">\n        <li class="item">\n            <div class="item-name">JavaScript<\/div>\n            <div class="item-desc">\u4e00\u79cd\u52a8\u6001\u7f16\u7a0b\u8bed\u8a00\uff0c\u5e7f\u6cdb\u7528\u4e8e\u7f51\u9875\u5f00\u53d1<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">Python<\/div>\n            <div class="item-desc">\u7b80\u6d01\u6613\u5b66\u7684\u7f16\u7a0b\u8bed\u8a00\uff0c\u9002\u5408\u521d\u5b66\u8005<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">Java<\/div>\n            <div class="item-desc">\u8de8\u5e73\u53f0\u7684\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u8bed\u8a00<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">C++<\/div>\n            <div class="item-desc">\u9ad8\u6027\u80fd\u7684\u7f16\u7a0b\u8bed\u8a00\uff0c\u7528\u4e8e\u7cfb\u7edf\u5f00\u53d1<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">HTML<\/div>\n            <div class="item-desc">\u7f51\u9875\u7684\u6807\u8bb0\u8bed\u8a00\uff0c\u5b9a\u4e49\u7f51\u9875\u7ed3\u6784<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">CSS<\/div>\n            <div class="item-desc">\u6837\u5f0f\u8868\u8bed\u8a00\uff0c\u63a7\u5236\u7f51\u9875\u5916\u89c2<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">React<\/div>\n            <div class="item-desc">Facebook \u5f00\u53d1\u7684 JavaScript \u5e93<\/div>\n        <\/li>\n        <li class="item">\n            <div class="item-name">Vue.js<\/div>\n            <div class="item-desc">\u6e10\u8fdb\u5f0f JavaScript \u6846\u67b6<\/div>\n        <\/li>\n    <\/ul>\n\n    <div class="no-results" id="noResults">\n        \u6ca1\u6709\u627e\u5230\u5339\u914d\u7684\u7ed3\u679c\n    <\/div>\n\n    <script>\n        const searchInput = document.getElementById('searchInput');\n        const items = document.querySelectorAll('.item');\n        const noResults = document.getElementById('noResults');\n\n        \/\/ \u5b9e\u65f6\u641c\u7d22\n        searchInput.addEventListener('input', function() {\n            const searchTerm = this.value.toLowerCase().trim();\n            let visibleCount = 0;\n\n            items.forEach(item => {\n                const name = item.querySelector('.item-name').textContent.toLowerCase();\n                const desc = item.querySelector('.item-desc').textContent.toLowerCase();\n\n                \/\/ \u68c0\u67e5\u540d\u79f0\u6216\u63cf\u8ff0\u662f\u5426\u5305\u542b\u641c\u7d22\u8bcd\n                if (name.includes(searchTerm) || desc.includes(searchTerm)) {\n                    item.classList.remove('hidden');\n                    visibleCount++;\n                } else {\n                    item.classList.add('hidden');\n                }\n            });\n\n            \/\/ \u663e\u793a\/\u9690\u85cf"\u65e0\u7ed3\u679c"\u6d88\u606f\n            if (visibleCount === 0) {\n                noResults.style.display = 'block';\n            } else {\n                noResults.style.display = 'none';\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        \u793a\u4f8b 3\uff1a\u8868\u5355\u6570\u636e\u6536\u96c6\u548c\u5e8f\u5217\u5316<\/h3>\n
        <!DOCTYPE html>\n<html lang="zh-CN">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>\u8868\u5355\u6570\u636e\u6536\u96c6<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            max-width: 600px;\n            margin: 50px auto;\n            padding: 20px;\n        }\n\n        .form-group {\n            margin-bottom: 15px;\n        }\n\n        label {\n            display: block;\n            margin-bottom: 5px;\n            font-weight: bold;\n        }\n\n        input, select, textarea {\n            width: 100%;\n            padding: 8px;\n            box-sizing: border-box;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        }\n\n        textarea {\n            min-height: 80px;\n            resize: vertical;\n        }\n\n        button {\n            background-color: #4CAF50;\n            color: white;\n            padding: 10px 20px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            margin-right: 10px;\n        }\n\n        button:hover {\n            background-color: #45a049;\n        }\n\n        .output {\n            margin-top: 20px;\n            padding: 15px;\n            background-color: #f5f5f5;\n            border-radius: 4px;\n            white-space: pre-wrap;\n            font-family: monospace;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h2>\u7528\u6237\u4fe1\u606f\u6536\u96c6<\/h2>\n\n    <form id="infoForm">\n        <div class="form-group">\n            <label for="name">\u59d3\u540d\uff1a<\/label>\n            <input type="text" id="name" name="name" required>\n        <\/div>\n\n        <div class="form-group">\n            <label for="age">\u5e74\u9f84\uff1a<\/label>\n            <input type="number" id="age" name="age" min="1" max="120">\n        <\/div>\n\n        <div class="form-group">\n            <label for="gender">\u6027\u522b\uff1a<\/label>\n            <select id="gender" name="gender">\n                <option value="">\u8bf7\u9009\u62e9<\/option>\n                <option value="male">\u7537<\/option>\n                <option value="female">\u5973<\/option>\n                <option value="other">\u5176\u4ed6<\/option>\n            <\/select>\n        <\/div>\n\n        <div class="form-group">\n            <label>\u5174\u8da3\uff1a<\/label>\n            <label>\n                <input type="checkbox" name="hobbies" value="reading"> \u9605\u8bfb\n            <\/label>\n            <label>\n                <input type="checkbox" name="hobbies" value="sports"> \u8fd0\u52a8\n            <\/label>\n            <label>\n                <input type="checkbox" name="hobbies" value="music"> \u97f3\u4e50\n            <\/label>\n            <label>\n                <input type="checkbox" name="hobbies" value="travel"> \u65c5\u884c\n            <\/label>\n        <\/div>\n\n        <div class="form-group">\n            <label for="bio">\u4e2a\u4eba\u7b80\u4ecb\uff1a<\/label>\n            <textarea id="bio" name="bio"><\/textarea>\n        <\/div>\n\n        <button type="submit">\u63d0\u4ea4<\/button>\n        <button type="button" id="showJsonBtn">\u663e\u793a JSON<\/button>\n        <button type="button" id="resetBtn">\u91cd\u7f6e<\/button>\n    <\/form>\n\n    <div class="output" id="output"><\/div>\n\n    <script>\n        const form = document.getElementById('infoForm');\n        const output = document.getElementById('output');\n        const showJsonBtn = document.getElementById('showJsonBtn');\n        const resetBtn = document.getElementById('resetBtn');\n\n        \/\/ \u65b9\u6cd5 1\uff1a\u624b\u52a8\u6536\u96c6\u8868\u5355\u6570\u636e\n        function collectFormData() {\n            const data = {\n                name: form.elements.name.value,\n                age: parseInt(form.elements.age.value) || 0,\n                gender: form.elements.gender.value,\n                hobbies: [],\n                bio: form.elements.bio.value\n            };\n\n            \/\/ \u6536\u96c6\u9009\u4e2d\u7684\u590d\u9009\u6846\n            const checkboxes = form.querySelectorAll('input[name="hobbies"]:checked');\n            checkboxes.forEach(cb => {\n                data.hobbies.push(cb.value);\n            });\n\n            return data;\n        }\n\n        \/\/ \u65b9\u6cd5 2\uff1a\u4f7f\u7528 FormData\n        function collectFormDataObject() {\n            const formData = new FormData(form);\n            const data = {};\n\n            \/\/ \u904d\u5386 FormData\n            for (let [key, value] of formData.entries()) {\n                \/\/ \u5904\u7406\u591a\u9009\u503c\uff08\u590d\u9009\u6846\uff09\n                if (data[key]) {\n                    if (Array.isArray(data[key])) {\n                        data[key].push(value);\n                    } else {\n                        data[key] = [data[key], value];\n                    }\n                } else {\n                    data[key] = value;\n                }\n            }\n\n            return data;\n        }\n\n        \/\/ \u663e\u793a\u8f93\u51fa\n        function displayOutput(data, title = '\u8868\u5355\u6570\u636e') {\n            output.textContent = `${title}\uff1a\\n${JSON.stringify(data, null, 2)}`;\n        }\n\n        \/\/ \u8868\u5355\u63d0\u4ea4\n        form.addEventListener('submit', function(event) {\n            event.preventDefault();\n\n            const data = collectFormData();\n            displayOutput(data, '\u63d0\u4ea4\u7684\u6570\u636e');\n\n            console.log('\u8868\u5355\u6570\u636e\uff1a', data);\n        });\n\n        \/\/ \u663e\u793a JSON \u6309\u94ae\n        showJsonBtn.addEventListener('click', function() {\n            const data = collectFormDataObject();\n            displayOutput(data, 'FormData \u5bf9\u8c61');\n        });\n\n        \/\/ \u91cd\u7f6e\u6309\u94ae\n        resetBtn.addEventListener('click', function() {\n            form.reset();\n            output.textContent = '';\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n
        \ud83d\udcca \u8868\u5355\u9a8c\u8bc1\u6280\u5de7<\/h2>\n
        1. \u5b9e\u65f6\u9a8c\u8bc1 vs \u63d0\u4ea4\u65f6\u9a8c\u8bc1<\/h3>\n
        \/\/ \u5b9e\u65f6\u9a8c\u8bc1\uff08\u7528\u6237\u8f93\u5165\u65f6\uff09\ninput.addEventListener('input', validate);\n\n\/\/ \u5931\u53bb\u7126\u70b9\u9a8c\u8bc1\ninput.addEventListener('blur', validate);\n\n\/\/ \u63d0\u4ea4\u65f6\u9a8c\u8bc1\nform.addEventListener('submit', function(event) {\n    if (!validate()) {\n        event.preventDefault(); \/\/ \u963b\u6b62\u63d0\u4ea4\n    }\n});\n<\/code><\/pre>\n
        2. \u6b63\u5219\u8868\u8fbe\u5f0f\u9a8c\u8bc1<\/h3>\n
        \/\/ \u90ae\u7bb1\u9a8c\u8bc1\nconst emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n\n\/\/ \u624b\u673a\u53f7\u9a8c\u8bc1\uff08\u4e2d\u56fd\uff09\nconst phoneRegex = \/^1[3-9]\\d{9}$\/;\n\n\/\/ \u7528\u6237\u540d\u9a8c\u8bc1\uff08\u5b57\u6bcd\u5f00\u5934\uff0c\u5141\u8bb8\u5b57\u6bcd\u6570\u5b57\u4e0b\u5212\u7ebf\uff0c4-16\u4f4d\uff09\nconst usernameRegex = \/^[a-zA-Z][a-zA-Z0-9_]{3,15}$\/;\n\n\/\/ \u5bc6\u7801\u9a8c\u8bc1\uff08\u81f3\u5c118\u4f4d\uff0c\u5305\u542b\u5b57\u6bcd\u548c\u6570\u5b57\uff09\nconst passwordRegex = \/^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$\/;\n\n\/\/ \u4f7f\u7528\u793a\u4f8b\nfunction validateEmail(email) {\n    return emailRegex.test(email);\n}\n<\/code><\/pre>\n
        3. \u81ea\u5b9a\u4e49\u9a8c\u8bc1\u6837\u5f0f<\/h3>\n
        \/\/ \u6dfb\u52a0\u9a8c\u8bc1\u6837\u5f0f\nfunction setValid(input) {\n    input.style.borderColor = '#4CAF50';\n    input.classList.add('valid');\n    input.classList.remove('invalid');\n}\n\nfunction setInvalid(input) {\n    input.style.borderColor = '#f44336';\n    input.classList.add('invalid');\n    input.classList.remove('valid');\n}\n\n\/\/ CSS \u6837\u5f0f\n\/*\ninput.valid {\n    border-color: #4CAF50;\n}\n\ninput.invalid {\n    border-color: #f44336;\n}\n\ninput.valid::after {\n    content: '\u2713';\n    color: #4CAF50;\n}\n\ninput.invalid::after {\n    content: '\u2717';\n    color: #f44336;\n}\n*\/\n<\/code><\/pre>\n
        \u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n
        1. \u6c38\u8fdc\u4e0d\u8981\u53ea\u4f9d\u8d56\u5ba2\u6237\u7aef\u9a8c\u8bc1<\/h3>\n
        \/\/ \u274c \u9519\u8bef\uff1a\u53ea\u9a8c\u8bc1\u524d\u7aef\nform.addEventListener('submit', function(event) {\n    if (isValid) {\n        \/\/ \u76f4\u63a5\u63d0\u4ea4\uff0c\u4e0d\u5b89\u5168\uff01\n    }\n});\n\n\/\/ \u2705 \u6b63\u786e\uff1a\u524d\u7aef\u9a8c\u8bc1 + \u540e\u7aef\u9a8c\u8bc1\nform.addEventListener('submit', function(event) {\n    if (isValid) {\n        \/\/ \u53d1\u9001\u5230\u670d\u52a1\u5668\u8fdb\u884c\u9a8c\u8bc1\n        fetch('\/api\/register', {\n            method: 'POST',\n            body: JSON.stringify(formData)\n        }).then(response => {\n            \/\/ \u5904\u7406\u670d\u52a1\u5668\u9a8c\u8bc1\u7ed3\u679c\n        });\n    }\n});\n<\/code><\/pre>\n
        2. \u9632\u6b62 XSS \u653b\u51fb<\/h3>\n
        \/\/ \u274c \u5371\u9669\uff1a\u76f4\u63a5\u663e\u793a\u7528\u6237\u8f93\u5165\ndiv.innerHTML = userInput;\n\n\/\/ \u2705 \u5b89\u5168\uff1a\u8f6c\u4e49\u7528\u6237\u8f93\u5165\nfunction escapeHtml(text) {\n    const map = {\n        '&': '&amp;',\n        '<': '&lt;',\n        '>': '&gt;',\n        '"': '&quot;',\n        "'": '&#039;'\n    };\n    return text.replace(\/[&<>"']\/g, m => map[m]);\n}\n\ndiv.textContent = userInput; \/\/ \u6216\u4f7f\u7528 textContent\n<\/code><\/pre>\n
        3. \u5904\u7406\u8868\u5355\u91cd\u7f6e<\/h3>\n
        \/\/ \u91cd\u7f6e\u8868\u5355\u65f6\uff0c\u4e5f\u8981\u91cd\u7f6e\u81ea\u5b9a\u4e49\u6837\u5f0f\nresetBtn.addEventListener('click', function() {\n    form.reset();\n    \/\/ \u91cd\u7f6e\u9a8c\u8bc1\u72b6\u6001\n    document.querySelectorAll('.error').forEach(el => {\n        el.style.display = 'none';\n    });\n    document.querySelectorAll('input').forEach(input => {\n        input.style.borderColor = '#ddd';\n    });\n});\n<\/code><\/pre>\n
        \u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n
        \u7ec3\u4e60 1\uff1a\u767b\u5f55\u8868\u5355\uff0830\u5206\u949f\uff09<\/h3>\n
        \u521b\u5efa\u4e00\u4e2a\u767b\u5f55\u8868\u5355\uff0c\u5305\u542b\u7528\u6237\u540d\u548c\u5bc6\u7801\u5b57\u6bb5\uff0c\u5b9e\u73b0\u57fa\u672c\u7684\u9a8c\u8bc1\u3002<\/p>\n
        \u8981\u6c42<\/strong>\uff1a<\/p>\n