node.js - 如何使用express-validator在nodejs中的每个输入类型字段上显示错误消息

Question

I am begginer in nodejs and I am using express-validator library to validate form.

我想分别向每个输入类型字段显示错误消息， 不明智。 目前我的代码显示了像

这样的组中的错误

Name is required!
Email is required!
Email is wrong!
Mobile is required!

============================================================================

Controller 代码

employeeController.saveEmployee = function(req,res){
    var employeeData = req.body;
    // Start Validation
    req.checkBody('employeeName','Name is required!').notEmpty();
    req.checkBody('employeeEmail','Email is required!').notEmpty();
    req.checkBody('employeeEmail','Email is wrong!').isEmail();
    req.checkBody('employeeMobile','Mobile is required!').notEmpty();

    req.sanitize('employeeName').trim();
    req.sanitize('employeeName').escape();
    // End Validation
    var errors = req.validationErrors();
    console.log(errors);
    if(!errors){
        var employee = new Employee({
            name : req.body.employeeName,
            email : req.body.employeeEmail,
            mobile : req.body.employeemobile,
        });
        employee.save(function(err){
            if(err){
                throw err;
            }
            console.log('User inserted successfully');
            res.redirect('/employee-list');
        });
    }else{
        console.log(employeeData.employeeName);
        res.render('employee/add-employee',{
            errors : errors,
            employeeData : employeeData
        });
    }
};

查看模板

<div class="col-md-12">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Add Employee Profile</h3>
            <h5 class='text-aqua pull-right' style='margin-top: 0px;'>
                <a href='javascript:void(0);' onclick='' class="btn btn-sm btn-info btn-flat"><i class="fa fa-backward"></i>&nbsp;Back</a>
            </h5>
        </div>
        <p>
            <% if(errors){ %>
                <ul>
                <% for(var i = 0; i < errors.length; i++){ %>
                    <li> <%= errors[i].msg %> </li>
                <% } %>
                </ul>
             <% } %>
        </p>
        <!-- form start -->
        <form method = 'post' action = '/save-employee'>
            <div class="box-body">
                <div class="form-group col-md-4">
                    <label>Name</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                        <input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
                    </div>

                </div>
                <div class="form-group col-md-4">
                    <label>Email</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span> 
                        <input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
                    </div>

                </div>
                <div class="form-group col-md-4">
                    <label>Mobile</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span> 
                        <input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
                    </div>

                </div>
            </div>
            <div class="callout" id='message-container' style='display:none;'></div>
            <div class="box-footer">
                <button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
            </div>
        </form>
    </div>
</div>

Answer 1

好吧，所以你要做的就是单独的错误。 您的 Controller 文件:

employeeController.saveEmployee = function(req,res){
    const nameRequired = 'Name is required!';
    const emailRequired = 'Email is required!';
    const emailNotValid = 'Email is wrong!';
    const mobileRequired = 'Mobile is required!';

    const employeeData = req.body;
    // Start Validation
    req.checkBody('employeeName', nameRequired).notEmpty();
    req.checkBody('employeeEmail', emailRequired).notEmpty();
    req.checkBody('employeeEmail', emailNotValid).isEmail();
    req.checkBody('employeeMobile', mobileRequired).notEmpty();

    req.sanitize('employeeName').trim();
    req.sanitize('employeeName').escape();
    // End Validation
    const errors = req.validationErrors();
    console.log(errors);
    if(!errors){
        const employee = new Employee({
            name : req.body.employeeName,
            email : req.body.employeeEmail,
            mobile : req.body.employeemobile,
        });
        employee.save(function(err){
            if(err){
                throw err;
            }
            console.log('User inserted successfully');
            res.redirect('/employee-list');
        });
    }else{
        console.log(employeeData.employeeName);
        const employeeNameRequired = errors.find(el => el === nameRequired );
        const employeeEmailRequired = errors.find(el => el === emailRequired);
        const employeeEmailNotValid = errors.find(el => el === emailNotValid);
        const employeeMobileRequired = errors.find(el => el === mobileRequired);

        res.render('employee/add-employee',{
            employeeData,
            employeeNameRequired,
            employeeEmailRequired,
            employeeEmailNotValid,
            employeeMobileRequired
        });
    }
};

您查看的文件将如下所示:

<div class="col-md-12">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">Add Employee Profile</h3>
            <h5 class='text-aqua pull-right' style='margin-top: 0px;'>
                <a href='javascript:void(0);' onclick='' class="btn btn-sm btn-info btn-flat"><i class="fa fa-backward"></i>&nbsp;Back</a>
            </h5>
        </div>
        <!-- form start -->
        <form method = 'post' action = '/save-employee'>
            <div class="box-body">
                <div class="form-group col-md-4">
                    <label>Name</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                        <input type='text' name='employeeName' id='employeeName' value='<%= employeeData.employeeName %>' class='form-control' placeholder='Employee Name'>
                        <p><%= employeeNameRequired %></p>
                    </div>
                    <div class="form-group has-error">
                        <span class="help-block" style="text-align:center" id="error_tagType"></span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label>Email</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span> 
                        <input type='text' name='employeeEmail' id='employeeEmail' value='<%= employeeData.employeeEmail %>' class='form-control' placeholder='Employee Email'>
                        <p><%= employeeEmailRequired %></p>
                        <p><%= employeeEmailNotValid %></p>
                    </div>
                    <div class="form-group has-error">
                        <span class="help-block" style="text-align:center" id="error_tagName"></span>
                    </div>
                </div>
                <div class="form-group col-md-4">
                    <label>Mobile</label>
                    <div class='input-group'>
                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span> 
                        <input type='text' name='employeeMobile' id='employeeMobile' value='<%= employeeData.employeeMobile %>' class='form-control' placeholder='Employee Mobile'>
                        <p><%= employeeMobileRequired %></p>
                    </div>
                    <div class="form-group has-error">
                        <span class="help-block" style="text-align:center" id="error_tagDescription"></span>
                    </div>
                </div>
            </div>
            <div class="callout" id='message-container' style='display:none;'></div>
            <div class="box-footer">
                <button type='submit' name='saveEmployeeProfile' class='btn btn-primary'>Save</button>
            </div>
        </form>
    </div>
</div>

更新:
就我个人而言，使用 jsonSchema验证最适合。它的可配置性非常好，并且可以生成更具可读性的代码。例如模块 tv4可以与 jsonSchema 一起使用来验证 req.body。