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再次加载到服务器的内存中并对其进行修改，在请求结束时，该请求将被丢弃，并且不会影响{{ 1}}。

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

res.render

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

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...",
    });
});

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

1 个答案: