JavaScript(JS) DOM表单操作

40485 阅读 0 评论 128 点赞

上一节我们学习了JS中DOM树的遍历，本节我们将学习JS中的表单操作，包括表单的本地存储、信息验证和动态渲染。

比如我们有一个学生表，包括4个字段，姓名（name）、年龄（age）、性别（gender）学生码（ID），通过填写表格，进行信息验证，填写完后存入本地，然后从本地存储里拿出来渲染。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; padding: 20px; }
        .form-group { margin: 10px 0; }
        input, select { padding: 5px; margin-left: 10px; }
        button { padding: 8px 16px; margin: 10px 0; }
        table { border-collapse: collapse; margin-top: 20px; width: 100%; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
        .error { color: red; font-size: 12px; margin-top: 5px; }
    </style>
</head>
<body>
    <h2>学生信息录入</h2>
    <!-- 表单验证 -->
    <form id="studentForm">
        <div class="form-group">
            <label>姓名:</label>
            <input type="text" id="name" name="name">
            <div class="error" id="nameError"></div>
        </div>
       
        <div class="form-group">
            <label>年龄:</label>
            <input type="number" id="age" name="age">
            <div class="error" id="ageError"></div>
        </div>
       
        <div class="form-group">
            <label>性别:</label>
            <select id="gender" name="gender">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
       
        <div class="form-group">
            <label>学生码:</label>
            <input type="text" id="studentId" name="studentId">
            <div class="error" id="idError"></div>
        </div>
       
        <button type="submit">添加学生</button>
    </form>
    <h2>学生列表</h2>
    <table id="studentTable">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>学生码</th>
            </tr>
        </thead>
        <tbody id="studentList">
        </tbody>
    </table>
    <script>
        /* 3. 从本地存储获取学生数据 */
        function getStudents() {
            return JSON.parse(localStorage.getItem('students')) || [];//这里放一个空数组很讲究，确保处理的变量始终是数组
        }
        /* 2. 保存学生数据到本地存储 */
        function saveStudents(students) {
            localStorage.setItem('students', JSON.stringify(students));
        }
        /* 4. 渲染学生列表 */
        function renderStudents() {
            const students = getStudents();
            const tbody = document.getElementById('studentList');
            tbody.innerHTML = '';
            
            students.forEach(student => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${student.name}</td>
                    <td>${student.age}</td>
                    <td>${student.gender}</td>
                    <td>${student.studentId}</td>
                `;
                tbody.appendChild(tr);
            });
        }
        /* 1. 填写表单内容进行信息验证 */
        document.getElementById('studentForm').addEventListener('submit', function(e) {
            e.preventDefault();
            /* 1.1 获取学生相关属性 */
            const name = document.getElementById('name').value.trim();
            const age = document.getElementById('age').value;
            const gender = document.getElementById('gender').value;
            const studentId = document.getElementById('studentId').value.trim();//trim剪切多余空格
            let isValid = true;//1.2 准备一个boolean变量标记信息是否合法
            
            // 1.3清空错误信息
            document.getElementById('nameError').textContent = '';
            document.getElementById('ageError').textContent = '';
            document.getElementById('idError').textContent = '';
            
            // 1.4 信息验证-姓名验证
            if (!/^[\u4e00-\u9fa5a-zA-Z]+$/.test(name)) {
                document.getElementById('nameError').textContent = '姓名只能包含中文和英文字母';
                isValid = false;
            }
            // 1.5 信息验证-年龄验证
            if (age > 100 || age < 1) {
                document.getElementById('ageError').textContent = '年龄必须在1-100之间';
                isValid = false;
            }
            
            // 1.6 信息验证-学生码验证
            if (!studentId) {
                document.getElementById('idError').textContent = '学生码不能为空';
                isValid = false;
            }
            //1.7 检查学生信息是否合法，合法则放本地存储。
            if (isValid) {
                const students = getStudents();
                students.push({ name, age, gender, studentId });
                saveStudents(students);
                renderStudents();
                
                // 1.8清空表单
                document.getElementById('studentForm').reset();
            }
        });
        // 5. 初始化渲染
        renderStudents();
    </script>
</body>
</html>

本例子没有删除学生操作，读者可以自行尝试，实现表格单个或全部一键清空效果。

总结：本节我们以实践为主，讲了一下表单验证的基本方法。具体操作多与DOM方法有关，比如标签的获取、标签的追加、正则表达式以及reset()重置函数的使用。