なんだかGoodVibes

日々の勉強メモです。

【Node】バリデーション

Node.js

メモです。
バリデーションを使ってみたので手順と基本をメモ。


概要

バリデーションは入力された値のチェックを行う機能。
今回はExpress Validatorを使用する。
入力項目は、名前・年齢・メモの3つ。
それぞれチェックを行う。


モジュールのインストール

$npm install --save express-validator


ソース

作成した構成は以下。

-- piblic
    -- style.css
-- router
    -- index.js
-- views
    -- index.ejs
--app.js


app.js

必要な情報の設定などを記載しています。
今回特別なことを記載しているわけではないので 省略します。
以前の記事でも紹介しているのでご参考に。

nandakagoodvibes.hatenablog.com


style.css

エラーの文字を赤文字にしたかったので
以下を記載しました。

.error {
    color: red;
}


index.ejs

表示のテンプレートです。
value属性を記載しているのは
エラーがあり、再入力のときに前回の値が消えないようにするためです。
前回入力値を記憶して、再度セットするようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="texl/html; charset=UTF-8">
    <title><%= title %></title>
    <link type="text/css" href="./style.css" rel="stylesheet">
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
        <form method="post" action="/">
        <table>
            <tr>
                <th>NAME</th>
                <td><input type="text" name="name" value="<%= form.name %>"></td>
            </tr>
            <tr>
                <th>AGE</th>
                <td><input type="number" name="age"
                    value="<%= form.age %>"></td>
            </tr>
            <tr>
                <th>MEMO</th>
                <td><input type="text" name="memo"
                    value="<%= form.memo %>"></td>
            </tr>
            <tr>
                <th></th>
                <td><input type="submit" value="送信"></td>
            </tr>
        </table>
    </form>
    </div>
</body>
</html>


index.js

このファイルでバリデーションの処理をしています。
router.post~にて第2引数に配列でバリデーションを記述。
第3引数のコールバック関数で結果に応じた処理を行っています。

var express = require('express');
var router = express.Router();

// Express Validator の利用
const {check, validationResult} = require('express-validator');

router.get('/', (req, res, next) => {
    res.render('index.ejs', {
        title: '入力フォーム',
        content: '以下を入力してください。',
        form: {name:'', age:0, memo:''}
    });
});

router.post('/', [
    // バリデーションを設定・実行
    // メッセージを設定しない場合は「Invalid value」が設定される 
    check('name')
        .not()
        .isEmpty()
        .withMessage('NAMEが未入力です。'),

    check('age')
        .isInt()
        .withMessage('AGEは整数を入力してください。'),

    check('memo')
        .isLength({ max: 10 })
        .withMessage('MEMOは10文字以下です。')
], (req, res, next) => {

    // バリデーションの結果を取得
    const errors = validationResult(req);

    // エラーが存在するかどうか
    if (!errors.isEmpty()) {
        var errorItem = errors.array();
        var result_text = '<ul class="error">';
        for (var i in errorItem) {
            result_text += '<li>' + errorItem[i].msg + '</li>';
        }

        result_text += '</ul>';
        res.render('index.ejs', {
            title: '入力フォーム',
            content: result_text,
            form: req.body
        });
    } else {
        res.render('index.ejs', {
            title: '入力フォーム',
            content: 'No Error',
            form: req.body
        });
    }
});

module.exports = router;