express-validator 并在出错后填充输入字段答案

【问题标题】：express-validator and populating an input field after an errorexpress-validator 并在出错后填充输入字段
【发布时间】：2019-04-03 05:28:56
【问题描述】：

我对 node 和 express 比较陌生，遇到了一个我似乎无法解决的问题。

我创建了一个 SSCCE，它尝试接受两个输入，名称和高度，如果存在验证错误，则使用这些值再次呈现同一页面。

如果我在高度字段中输入“2.2.2”（显然不是浮点数），则不会重新渲染该值。如果我将高度输入更改为 type="text"，则该字段将使用以前的值呈现。文本类型的所有其他字段都按预期运行。

我在表单上添加了“novalidate”，但这是数字输入类型的怪癖吗？还是我犯了一个简单的错误？

（我也有点困惑，为什么 'isFloat()' 接受 '2' 为有效）

任何帮助将不胜感激

app.js

const express = require('express');

const app = express();
const bodyParser = require('body-parser');
const { check } = require('express-validator/check');
const { validationResult } = require('express-validator/check');


app.use(bodyParser.urlencoded({ extended: false }));

app.set('view engine', 'ejs');
app.set('views', 'views');

app.get('/', (req, res, next) => {
    res.render('test', {
        pageTitle: 'Test',
        hasError: false,
        validationErrors: []
    })
});

app.post('/', 
    [
        check('name', 'Name must be at least 2 letters in length')
            .isLength({min: 3}),
        check('height', 'Height must be a float')
            .isFloat()
    ] , 
    (req, res, next) => {
        const errors = validationResult(req);

        if(!errors.isEmpty()){
            console.log(errors.array());
            return res.render('test', {
                pageTitle: 'Error',
                hasError: true,
                validationErrors: errors.array(),
                person: {
                    name: req.body.name,
                    height: req.body.height
                }
            })
        } else {
            res.send(`Person created: ${req.body.name}, height: ${req.body.height}`);
        }
    });

app.listen(3000);

test.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= pageTitle %></title>
</head>

<body>
    <div class="errorMessage"><%= validationErrors.length > 0 ? validationErrors[0].msg:'' %></div>
    <form action="/" class="test-form" method="POST" novalidate>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="<%= hasError ? person.name:'' %>">

        <label for="height">Height</label>
        <input type="number" name="height" id="height" value="<%= hasError ? person.height:'' %>">    
        <button class="submit">Submit</button>
    </form>
</body>

</html>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "express-validator": "^5.3.1"
  }
}

【问题讨论】：

标签： node.js express express-validator

【解决方案1】：

我放弃了。似乎没有任何方法可以让 number 类型的输入字段提交无效值，即使使用 novalidate 也是如此。

所以我只是将类型更改为文本。

【讨论】：