无法修改Node.js中HTML元素的值

Question

我有一个HTML表单，该表单应由用户填写。 填写完表格后，将检查引入的数据，以查看是否已引入引入的用户名。 如果用户名是唯一的，则输入数据有效。 如果用户名已被其他人使用，我想重新加载注册页面，该页面称为signUp.html ，但我也想修改该HTML表单包含的那些字段的值和占位符。 除了“ Username和“ Password字段外，我希望每个其他字段都包含用户之前引入的数据。 例如，如果“ First Name字段包含值Toma ，那么在重新加载页面后，我希望“ First Name字段具有值Toma 。 另一方面，我想更改Username字段的占位符消息，类似于： Sorry, this username is invalid... 我尝试使用jsdom包，以访问HTML文件： signUp.html ，该文件可在public/views找到。 HTML表单的代码为：

    <form method="POST" action="signUp" style="margin-left: 5%; margin-right: 5%; margin-top: 5%" class="was-validated">
        <div class="form-group">
            <label style="color: #ffffff"> First Name </label>
            <input type="text" name="firstName" class="form-control"  placeholder="e.g.: Toma" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Second Name </label>
            <input type="text" name="secondName" class="form-control" placeholder="e.g.: Alex" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Email </label>
            <input type="email" name="email" class="form-control" placeholder="e.g.: somename@somedomain.com" required>
        </div>


        <div class="form-group">
            <label style="color: #ffffff"> Username </label>
            <input type="text" name="username" class="form-control" placeholder="e.g.: miauMiau23 (this is the name your friends will identify you with)" required>
        </div>

        <div class="form-group">
            <label style="color: #ffffff"> Password </label>
            <input type="password" name="password" class="form-control" placeholder="please, use a solid password, having a minimum of 6 characters, small and capital letters, as well as numbers and symbols!" required>
        </div>

        <button type="submit" class="btn btn-primary" style="width: 100%"> Submit </button>
    </form>

在server.js找到的代码试图实现我之前描述的内容：

    app.post('/signUp', urlencodedParser, function(req, res){
        console.log("sorry... this username is invalid!");
        res.render('signUp');
        var { document } = (new JSDOM('public/views/signUp.html')).window;
        var firstNameField = document.getElementsByName('firstName');
        var secondNameField = document.getElementsByName('secondName');
        var emailField = document.getElementsByName('email');
        var usernameField = document.getElementsByName('username');
        var passwordField = document.getElementsByName('password');
        console.log(firstNameField.placeholder);
        firstNameField.value = req.body.firstName;
        secondNameField.value = req.body.secondName;
        emailField.value = req.body.email;
        usernameField.value = "";
        usernameField.placeholder = "'" + req.body.username + "' is an invalid username...";
        passwordField.value = "";
    }

重新加载后，页面将丢失所有引入的数据。

Answer 1

原因不起作用是因为res.render将在服务器上呈现页面，然后将其发送到客户端。 之后，您要做的只是简单地使用JSDOM将HTML再次加载到服务器的内存中并对其进行修改，在被丢弃的请求结束时，这不会影响res.render已经发送给客户端的内容res.render 。

正确的方法是在express.js服务器中使用模板语言（有很多选择），以动态呈现页面并将所需的值注入正确的位置。 然后，您可以简单地将变量传递给res.render ，以便在渲染模板时使用：

app.post('/signUp', urlencodedParser, function(req, res) {
    console.log("sorry... this username is invalid!");
    res.render('signUp', {
        firstName: req.body.firstName,
        secondName: req.body.secondName,
        email: req.body.email,
        error: "'" + req.body.username + "' is an invalid username...",
    });
});

例如，如果您将Pug.js用作模板引擎，则注册页面可能看起来像这样（我没有包括应该放入CSS的所有格式）：

form(method='POST' action='/signUp')
    div.form-group
        label(for='firstName') First Name
        input#firstName.form-control(type='text', name='firstName', value=firstName, required)
    div.form-group
        label(for='secondName') Second Name
        input#secondName.form-control(type='text', name='secondName', value=secondName, required)
    div.form-group
        label(for='email') Email:
        input#email.form-control(type='email', name='email', value=email, required)
    div.form-group
        label(for='username') Username
        if error:
            input#username.form-control(type='text', name='username', placeholder=error)
        else:
            input#username.form-control(type='text', name='username', placeholder='e.g.: miauMiau23 (this is the name your friends will identify you with')
    div.form-group
        label(for='password') Password:
        input#passwordw.form-control(type='password' name='password')
    button.btn.btn-primary(type='submit') Submit