JS/HTML+Node.js+MySQL表单提交数据无法入库解决方法

你当前代码无法完成数据插入的核心问题有3个：

• 函数定义后从未实际调用：ValidateEmail、postData都嵌套在myfunction内部，没有触发执行，校验逻辑和数据发送逻辑根本没有运行
• 校验逻辑残缺：仅写了邮箱校验的函数壳，没有做全字段非空、格式校验，也没有把用户输入的内容传入校验函数
• 缺少后端处理链路：没有编写对应的POST接口、数据库连接配置和数据插入逻辑，前端就算发出请求也没有服务端接收、写入数据库

把嵌套的工具函数抽离，先执行全量表单校验，校验通过后再向后端发POST请求，修正后的完整前端JS代码如下：

// 邮箱格式校验，抽离为独立工具函数，不要嵌套在提交函数里
function ValidateEmail(email) {
    const emailReg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (!emailReg.test(email)) {
        alert("请输入合法的邮箱地址！");
        return false;
    }
    return true;
}

// 全表单字段校验
function validateForm(params) {
    const { firstName, lastName, email, address, phoneNumber, fees } = params;
    // 非空校验
    if (!firstName.trim() || !lastName.trim() || !email.trim() || !address.trim() || !phoneNumber.trim() || fees === '') {
        alert("所有字段均不能为空！");
        return false;
    }
    // 手机号校验，境外手机号请根据当地号段规则调整正则
    if (!/^\d{7,15}$/.test(phoneNumber.trim())) {
        alert("请输入合法的手机号！");
        return false;
    }
    // 缴费金额校验
    if (isNaN(Number(fees)) || Number(fees) < 0) {
        alert("缴费金额必须是非负数字！");
        return false;
    }
    // 最后校验邮箱格式
    return ValidateEmail(email.trim());
}

// 向后端发送数据
async function postData(data) {
    try {
        // 接口地址改成你自己后端服务的实际地址
        const res = await fetch('http://localhost:3000/api/student/add', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        const result = await res.json();
        if (result.code === 200) {
            alert("提交成功！");
            // 提交成功后清空表单
            document.querySelectorAll('input').forEach(input => input.value = '');
        } else {
            alert(`提交失败：${result.msg}`);
        }
    } catch (err) {
        console.error('请求异常：', err);
        alert("网络请求失败，请确认后端服务已正常启动");
    }
}

// 表单提交入口
async function myfunction(){
    // 收集所有表单输入值
    const formParams = {
        firstName: document.getElementById("fname").value,
        lastName: document.getElementById("lname").value,
        email: document.getElementById("email").value,
        address: document.getElementById("address").value,
        phoneNumber: document.getElementById("phoneNumber").value,
        fees: document.getElementById("feespaid").value
    }
    // 校验不通过直接终止提交
    if (!validateForm(formParams)) return;
    // 校验通过再发请求
    await postData(formParams);
}

// 原有其他功能函数，自行补全逻辑即可
function getStudentsData() {}
function download() {}

你现有的HTML表单代码不需要大改，保持现有结构即可正常触发提交。

按以下步骤搭建后端服务，完成数据库插入逻辑：

1. 先在后端项目目录安装依赖，执行命令：

npm init -y
npm install express mysql2 cors

2. 提前在你的MySQL中创建业务库和学生表，执行以下SQL语句：

CREATE DATABASE IF NOT EXISTS student_sys DEFAULT CHARSET utf8mb4;
USE student_sys;
CREATE TABLE IF NOT EXISTS `student` (
  `id` int NOT NULL AUTO_INCREMENT,
  `first_name` varchar(50) NOT NULL,
  `last_name` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  `address` varchar(255) NOT NULL,
  `phone_number` varchar(20) NOT NULL,
  `fees_paid` decimal(10,2) NOT NULL,
  `create_time` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `idx_email` (`email`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 编写后端入口文件app.js，替换数据库配置为你本地的实际参数：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
const PORT = 3000;

// 中间件配置
app.use(cors()); // 解决前端跨域问题
app.use(express.json()); // 解析JSON格式请求体

// MySQL连接池配置，替换为你本地的数据库账号密码
const dbPool = mysql.createPool({
    host: 'localhost',
    user: 'root', // 本地数据库默认用户名一般是root
    password: '你的数据库密码',
    database: 'student_sys',
    waitForConnections: true,
    connectionLimit: 10
});

// 新增学生接口
app.post('/api/student/add', (req, res) => {
    const { firstName, lastName, email, address, phoneNumber, fees } = req.body;
    // 后端必须做二次参数校验，不能信任前端传的任何值
    if (!firstName || !lastName || !email || !address || !phoneNumber || fees === undefined) {
        return res.json({ code: 400, msg: '参数缺失' });
    }
    // 用占位符写SQL，禁止直接拼接参数，防止SQL注入
    const insertSql = `INSERT INTO student (first_name, last_name, email, address, phone_number, fees_paid) VALUES (?, ?, ?, ?, ?, ?)`;
    dbPool.query(insertSql, [firstName, lastName, email, address, phoneNumber, fees], (err, result) => {
        if (err) {
            console.error('数据库插入失败：', err);
            return res.json({ code: 500, msg: '数据写入失败，可能邮箱已被注册' });
        }
        res.json({ code: 200, msg: '新增成功', data: result });
    });
});

// 启动服务
app.listen(PORT, () => {
    console.log(`服务已启动，监听端口${PORT}`);
});

4. 执行命令启动后端服务：

node app.js

• 启动前端页面前，先确认MySQL服务正常运行、后端服务启动成功，数据库连接配置和你本地环境一致
• 前端写的请求地址、端口要和后端服务配置完全对应，不要写错路径
• 数据库操作必须用?占位符传参：禁止直接拼接用户输入到SQL语句中，避免SQL注入风险
• 校验逻辑必须前后端双写：前端校验是为了减少无效请求、提升用户体验，后端校验是为了保证数据安全和合法性，不能省略

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