无法修改 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.

正确的方法是在您的 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 作为模板引擎，您的 sign-up 页面可能看起来像这样（我没有包括所有应该进入 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

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

Cannot Modify The Value of HTML Elements From Node.js

html

javascript

node.js

jsdom