javascript - 无法从 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服务器来动态渲染页面并在正确的位置注入(inject)您想要的值。然后，您只需将变量传递到 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