使用 html 和 pug 的 express 验证器的值无效

Question

我是 pug 和 nodejs 的新手。 我正在尝试创建一个验证表单，然后才能发送到下一页，但我正在努力解决它。我已经成功使用 html 进行表单验证，但是当我更改为 pug 时，我遇到了问题，并且我发送的所有数据都出现“无效输入”。

这是错误：

{"errors":[{"msg":"无效值","param":"boardname","location":"body"},{"msg":"无效值","param": "ipaddress","location":"body"},{"msg":"无效值","param":"portnum","location":"body"}]}

这里是索引表格

<form action="/board" method="post" class="cntbox" enctype = multipart/form-data id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
                    <!--Close Button of the pop up-->
                    <div class="righttopicon" onclick="closeForm()">
                        <img src="images/square-x.png" alt="close icon">
                    </div>

                    <!--Form with the necessary inputs (Name of the Board, IP Address, Port and upload file). All the inputs are required-->
                    <div class="col-100">
                        <h3>Add new board:</h3>
                    </div>
                    <!--Input for the boards name with max length of 50 characters-->
                            <div class="col-75">
                                <label for="bname">Name of the Board: *</label><br>
                                <input type="text" id="boardname" name="boardname" placeholder="Ex: Board 1" maxlength="75">
                            </div>
                            <!--Input for the IP Address that can only accept IP's and with a max length of 15 characters-->
                            <div class="row">
                                <div class="col-75">
                                    <label for="ipaddress">IP Address: *</label><br>
                                    <input type="text" name="ipaddress" id="ipaddress" placeholder="Ex: 192.168.1.1" maxlength="15">
                                </div>
                            </div>
                            <!--Input for the Port that can only accept numbers with a max length of 4-->
                            <div class="row">
                                <div class="col-75">
                                    <label for="portnum">Port: *</label><br>
                                    <input type="text" name="portnum" id="portnum" placeholder="Ex: 8080" maxlength="4" minlength="2">
                                </div>
                            </div>
                            <!--Input for the upload of the boards image that can only accept .png files-->
                            <div class="row">
                                <div class="col-75">
                                    <label for="imgadd">Upload image:</label><br>
                                    <img src="images/file-upload.png" alt="Insert image" class="insrtimg" name="imageboard" id="insertimage">
                                    <input type="file" id="myFile" name="myFile" onchange="fileValidation(event)">
                                </div>
                            </div>
                            <!--'Save' and 'Discard' buttons -->
                            <div class="row">
                                <div class="col-80">
                                    <div class="btnformcontainer">
                                        <input type="submit" class="btnfrm btnconfrm" value="Save">
                                        <div class="btnfrm btndel"  onclick="discardValues()">Discard</div>
                                    </div>
                                </div>
                            </div>
                    </form>

和服务器（命名为 servertest2 用于测试）

var express= require('express');
var path = require('path');
var app = express();
var bodyParser = require('body-parser');
var {check, validationResult} = require('express-validator');

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


app.use(bodyParser.json());

//Allow to send json to the server
app.use(express.json());

//Serve images, css files and javascript files in the directory named 'public'
app.use(express.static(path.join(__dirname, 'public')));

//Load view engine
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, './public/views'));

app.get('/', function(req,res){
    res.sendFile(path.join(__dirname, '/public/views/index.html'));
});

app.get('/index', function(req,res){
    res.sendFile(path.join(__dirname, '/public/views/index.html'));
})

app.get('/board', function(req,res){
    res.render('board.pug');
})

app.post('/board', [
    check('boardname').notEmpty().isLength({max : 75}),
    //check if ipaddress is an IP
    check('ipaddress').isIP() || check('ipaddress').equals('localhost' === 'localhost'),
    //check if port is a number with max length of 4
    check('portnum').isPort({max:4}),
], 
function(req,res){
    let errors = validationResult(req)
    //check for errors and return json with results
    if(!errors.isEmpty()){
        return res.status(422).json({errors: errors.array()})
    }
    console.log(req.body.boardname);
    console.log(req.body.ipaddress);
    console.log(req.body.portnum);
    //console.log(req.body.myFile);
    let nameboard = req.body.boardname;
    res.render(('board.pug'), {name : nameboard});
})

//Start Server
app.listen(3000, function(){
    console.log('Server listening at port 3000');
});

Answer 1

!= messages('message', locals) 如果错误 每个错误，我在错误中 div(class='alert alert-danger') #{error.msg}