NodeJS res.render 在发布 EJS 表单数据时不起作用

Question

I am trying to render a page after form data is submitted.我正在尝试在提交表单数据后呈现页面。 There is no error message, it just isn't rendering the page.没有错误消息，只是没有呈现页面。 The page seems to refresh but nothing else.该页面似乎刷新但没有别的。 The res.render for the get request is working, verifying the path for pages is correct. get 请求的 res.render 正在运行，验证页面路径是否正确。

I originally suspected that the.preventdefault() and/or the.submit() functions were the problem but the page does refresh when all validations have passed.我最初怀疑 the.preventdefault() 和/或 the.submit() 函数是问题所在，但当所有验证都通过后页面确实刷新了。 FYI the validations are that all field must contain something, email must be valid, passwords must match and passwords must be between 5 and 20 characters long.仅供参考，验证是所有字段必须包含某些内容，电子邮件必须有效，密码必须匹配并且密码长度必须在 5 到 20 个字符之间。

Note: signup.ejs has some client side validation on it.注意：signup.ejs 有一些客户端验证。

signupRoutes.js signupRoutes.js

const express = require('express');
const router = express.Router();

const renderSignup = require('../controllers/signupController.js');
const postSignupData = require('../controllers/signupController.js');

router.get('/', renderSignup);
router.post('/', postSignupData);

signupController.js signupController.js

renderSignup = (req, res) => {
    res.render("signup");
};

postSignupData = (req, res) => {
    res.render("verify-email");
};

module.exports = renderSignup, postSignupData;

module.exports = router;

server.js服务器.js

const express = require('express');
const app = express();
const ejs = require('ejs');
const path = require('path');

app.use(express.static('../frontend/public'));

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

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '../frontend/pages'));

const signupRoutes = require('./routes/signupRoutes.js');
const verifyEmailRoutes = require('./routes/verifyEmailRoutes.js');

app.use('/signup', signupRoutes);
app.use('/verify-email', verifyEmailRoutes);

const port = 4000
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
})

signup.ejs注册.ejs

<head>
   <link rel="stylesheet" href="css/style.css">
   <title>Signup</title>
</head>

<body>
<h1>Signup</h1>
<form method="post" action="/signup" id="signupform">
    <label for="email">Email:</label>
    <input id="email" type="text"><br><br>
    <p class="error-msg" id="error-msg-empty-email">Email Cannot be Empty (Client Side Validation)</p>
    <p class="error-msg" id="error-msg-invalid-email">Email is not Valid (Client Side Validation)</p>
    <label for="password">Password:</label>
    <input id="password" type="password"><br><br>
    <p class="error-msg" id="error-msg-empty-password">Password Cannot be Empty (Client Side Validation)</p>
    <p class="error-msg" id="error-msg-password-character-limits">Password must be between 5 and 20 characters (Client Side Validation)</p>
    <label for="password">Confirm Password:</label>
    <input id="confirm-password" type="password"><br><br>
    <p class="error-msg" id="error-msg-password-mismatch">Passwords do not match (Client Side Validation)</p>
    <input id="signupsubmit" type="submit">
</form>
<a href="signin">Go to signin page!</a><br>
<a href="/">Go to home!</a>

<script>
    const signupform = document.getElementById("signupform");

    const errorMsgEmptyEmail = document.getElementById("error-msg-empty-email");
    const errorMsgInvalidEmail = document.getElementById("error-msg-invalid-email");
    const errorMsgEmptyPassword = document.getElementById("error-msg-empty-password");
    const errorMsgPasswordMismatch = document.getElementById("error-msg-password-mismatch");
    const errorMsgPasswordCharacterLimits = document.getElementById("error-msg-password-character-limits");

    signupform.addEventListener('submit', (e) => {

        e.preventDefault();
        checkInputs();
        if(errorCount === 0){
            signupform.submit();
        }
    });

    function checkInputs () {
        const email = document.getElementById("email").value.trim();
        const password = document.getElementById("password").value.trim();
        const confirmPassword = document.getElementById("confirm-password").value.trim();

        errorCount = 0;

        if(email === ''){
            errorMsgEmptyEmail.style.display = "block";
            errorCount++;
        } else{
            errorMsgEmptyEmail.style.display = "none";
            
            const regx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            
            if(email.match(regx)) {
                errorMsgInvalidEmail.style.display = "none";
            }else{
                errorMsgInvalidEmail.style.display = "block";
                errorCount++;
            }
        }

        if(password === ''){
            errorMsgEmptyPassword.style.display = "block";
            errorCount++;
        } else{
            errorMsgEmptyPassword.style.display = "none";
        }

        if(password != confirmPassword){
            errorMsgPasswordMismatch.style.display = "block";
            errorCount++;
        } else{
            errorMsgPasswordMismatch.style.display = "none";
        }
        
        if(5 <= password.length && password.length <= 20){
            errorMsgPasswordCharacterLimits.style.display = "none";
        } else{
            errorMsgPasswordCharacterLimits.style.display = "block";
            errorCount++;
        }
    };
</script>

Here is my folder structure这是我的文件夹结构

Backend后端
- server.js服务器.js
- routes路线
  - signupRoutes.js signupRoutes.js
- controllers控制器
  - signupController.js signupController.js
Front End前端
- pages页数
  - signup.ejs注册.ejs
  - verify-email.ejs验证-email.ejs
- public民众
  - css CSS
  - style.css样式.css

Answer 1

The problem could be in the following source code:问题可能出在以下源代码中：

 signupform.addEventListener('submit', (e) => {

        e.preventDefault();
        checkInputs();
        if(errorCount === 0){  // errorCount is not defined here
            signupform.submit();
        }
    });

The errorCount variable is not defined in the callback.回调中未定义errorCount变量。 It is defined in the checkInputs() function, but is not returned.它在checkInputs()函数中定义，但不返回。

To solve this, you can define the variable before calling checkInputs() like so:要解决这个问题，您可以在调用checkInputs()之前定义变量，如下所示：

  signupform.addEventListener('submit', (e) => {

        e.preventDefault();
        errorCount = 0;  // define the variable here
        checkInputs();
        if(errorCount === 0){
            signupform.submit();
        }
    });

    function checkInputs () {
        ...
        const confirmPassword = document.getElementById("confirm-password").value.trim();

        // remove the variable here
        ...

Another way, you can modify checkInputs() to return the errorCount variable like so:另一种方法是，您可以修改checkInputs()以返回errorCount变量，如下所示：

    function checkInputs () {
        const email = document.getElementById("email").value.trim();
        const password = document.getElementById("password").value.trim();
        const confirmPassword = document.getElementById("confirm-password").value.trim();

        errorCount = 0;
        ...
        return errorCount;      // at the end of the function

Then stored the returned value in the errorCount variable:然后将返回值存储在errorCount变量中：

 signupform.addEventListener('submit', (e) => {

        e.preventDefault();
        errorCount = checkInputs();   // store returned value
        if(errorCount === 0){ 
            signupform.submit();
        }
    });

NodeJS res.render 在发布 EJS 表单数据时不起作用

问题描述

1 个解决方案

解决方案1
0 2022-12-14 19:52:49

NodeJS res.render 在发布 EJS 表单数据时不起作用

问题描述

1 个解决方案

解决方案1 0 2022-12-14 19:52:49

解决方案1
0 2022-12-14 19:52:49