如何使用带有express-validator的nodejs显示每个输入字段的错误?

时间:2019-02-27 05:27:32

标签: node.js validation express express-validator

这个问题已经问了,但不能解决我的问题。

Nodejs的新用户。我尝试在插入数据时验证表单。

这里使用express-validator,错误消息显示form顶部。

这是我的错误消息:

enter image description here

但是我希望它显示在每个输入字段下

这是我的代码

.pug:

form(action="/admin/add_employee", method="POST")
    .form-group
        label.col-form-label First Name
        input.form-control(type="text", name="first_name", placeholder="Enter employee first name")
        div(style='color:red') #{errFirstName}
    .form-group
        label.col-form-label Last Name
        input.form-control(type="text", name="last_name", placeholder="Enter employee last name")
        div(style='color:red') #{errLastName}
    .form-group
        label.col-form-label Email
        input.form-control(type="email", name="email", placeholder="Enter employee email id")
    .form-group
        label.col-form-label Phone
        input.form-control(type="text", name="phone", placeholder="Enter employee phone")
    .form-group
        label.col-form-label Address
        textarea.form-control(type="text", name="address", placeholder="Enter employee address")
    input.btn.btn-primary(type="submit", name="save", value="Save Employee")

.js:

router.post('/add_employee', function(req, res){
    const first_name = req.body.first_name;
    const last_name = req.body.last_name;
    const email = req.body.email;
    const phone = req.body.phone;
    const address = req.body.address;

    req.checkBody('first_name', 'Please enter employee first name').notEmpty();
    req.checkBody('last_name', 'Please enter employee last name').notEmpty();
    req.checkBody('email', 'Please enter employee email').notEmpty();
    req.checkBody('email', 'Invalid Email id').isEmail();
    req.checkBody('phone', 'Please enter employee phone').notEmpty();
    req.checkBody('address', 'Please enter employee address').notEmpty();

    let errors = req.validationErrors();

    if(errors)
    {
        res.render('emp_add', {
            errors: errors
        });
    }
    else
    {
        let employee_data = Employee();
        employee_data.first_name = first_name;
        employee_data.fast_name = last_name;
        employee_data.email = email;
        employee_data.phone = phone;
        employee_data.address = address;
        employee_data.status = 1;

        console.log(employee_data);
        employee_data.save(function(err){
            if(err)
            {
                console.log(err);
                return;
            }
            else
            {

                req.flash('success', 'Employee added successfully');
                res.redirect('employee_list');
            }
        });
    }
});
  

我想在文本框下显示错误消息

2 个答案:

答案 0 :(得分:0)

验证时出现的错误是一个数组。

对于第一个错误消息,请使用-

errors[0].msg

一个建议,尽管您也可以使用以下库在前端添加验证-Library 该库是可自定义的,很棒。

答案 1 :(得分:0)

您可以在服务器端编写一个函数来循环遍历您的错误,并返回一个以字段名称为键、以错误为值的对象。

for (let i=0; i<errors.errors.length; i++) {
    newErrors[errors.errors[i].param] = errors.errors[i].msg
}

然后,您可以使用 this.state.errors.username 或密码或您在将其发送到服务器端时调用的任何名称在 p 标签等中显示错误。