表单未通过 _POST 发送数据答案

【问题标题】：Form not sending data via _POST表单未通过 _POST 发送数据
【发布时间】：2021-08-16 05:56:08
【问题描述】：

它应该是一个基本的网络表单，但我遇到了问题。我花了几个小时研究它，但似乎找不到问题。

我收到错误消息Cannot destructure property 'email' of 'req.body' as it is undefined。完整的源代码可以在这里找到：https://github.com/SophalLee/project_06_sophal_lee。这是我的代码的 sn-ps：

index.js

app.post('/login', (req, res) => {
    const { email, password } = req.body;
    console.log(email);
})

登录表单.js

import { checkName, numbersAndSpaceCheck, emailCheck } from '/js/validation.js';

const loginForm = document.getElementById('login');
const email = document.getElementById('email');
const password = document.getElementById('password');

loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    if(checkInputs()) {
        loginForm.submit();
    }
});

/* Validate input from form */
function checkInputs() {
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();

    let emailSuccess = false;
    let passwordSuccess = false;

    if(emailValue === '') {
        setErrorFor(email, "Email cannot be blank");
        emailSuccess = false;
    }
    else if(!emailCheck(emailValue)) {
        setErrorFor(email, "Invalid email");
        emailSuccess = false;
    }
    else {    
        setSuccessFor(email);
        emailSuccess = true;
    }

    if(passwordValue === '') {
        setErrorFor(password, "Password cannot be blank");
        passwordSuccess = false;
    }
    else {
        setSuccessFor(password);
        passwordSuccess = true;
    }

    return (emailSuccess & passwordSuccess);
}

/* Display error message and error icon */
export function setErrorFor(input, message) {
    const formControl = input.parentElement;
    const error = formControl.querySelector('.error-message');

    error.className = 'error-message error';
    error.innerText = message;
    formControl.className = 'form-control error'; 
}

/* Display success icon and remove any error message */
export function setSuccessFor(input) {
    const formControl = input.parentElement;
    const error = formControl.querySelector('.error-message');
    error.className = 'error-message';
    formControl.className = 'form-control success';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/cf53bba659.js" crossorigin="anonymous"></script>
    <link href="/css/forms.css" rel="stylesheet" type="text/css"/>
    <script type="module" src="/js/login-form.js" defer></script>
    <title>Locations - Login</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Login</h1>
        </div>
        <form class="form" id="login" action="/login" method="POST" novalidate>
            <div class="form-control">
                <label for="email">Email</label>
                <input name="email" id="email" type="text" required>
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <div class="error-message">&nbsp;</div>
            </div>
            <div class="form-control">
                <label for="password">Password</label>
                <input name="password" id="password" type="password" required>
                <i class="fas fa-check-circle"></i>
                <i class="fas fa-exclamation-circle"></i>
                <div class="error-message">&nbsp;</div>
            </div>
            <button>Submit</button>
        </div>
        </form>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html express

【解决方案1】：

我只需要 index.js 文件中的以下行：

app.use(express.urlencoded({ extended: true }));

【讨论】：