表单不通过 _POST 发送数据

Question

It's meant to be a basic web form but I am having issues with it.它应该是一个基本的 web 表格，但我遇到了问题。 I have spent hours working on it but can't seem to find the problem.我花了好几个小时研究它，但似乎找不到问题所在。

I am getting the error message Cannot destructure property 'email' of 'req.body' as it is undefined .我收到错误消息Cannot destructure property 'email' of 'req.body' as it is undefined 。 The full source code can be found here: https://github.com/SophalLee/project_06_sophal_lee .完整的源代码可以在这里找到： https://github.com/SophalLee/project_06_sophal_lee 。 Here are snippets of my code:以下是我的代码片段：

index.js索引.js

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

login-form.js登录表单.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';
}

login.ejs登录.ejs

<!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>

Answer 1

I just needed the following line in index.js file:我只需要 index.js 文件中的以下行：

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

表单不通过 _POST 发送数据

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-08-16 06:05:46

表单不通过 _POST 发送数据

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-08-16 06:05:46

解决方案1
0 已采纳 2021-08-16 06:05:46