Node.js express-validatorで入力値の検証を行う

express.jsでwebアプリケーションを作成。
postされた値の入力チェックを行う際はexpress-validatorが便利です。

https://express-validator.github.io/docs/

使い方を見てみます。


ベースのアプリケーション



入力値チェックを行う前の基本的なアプリケーションとして、
名前(name)とメールアドレス(email)をサーバーにpostするプログラムを作成しました。
テンプレートエンジンにはejsを使用しています。

expressとejsをインストール。


$ npm install express ejs




・server.js


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. app.set('view engine', 'ejs');
  6. app.use(express.urlencoded({ extended: true }));
  8. app.get('/', async (req, res, next) => {
  9.     res.render('index.ejs')
  10. });
  12. app.post('/regist', async (req, res, next) => {
  13.     // ここで入力値の検証を行いたい
  14.     console.log(req.body.name);
  15.     console.log(req.body.email);
  16.     res.render('index.ejs');
  17. });
  20. app.listen(port, () => {
  21.     console.log(`Example app listening at http://localhost:${port}`);
  22. });




・views/index.ejs


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6.     <title>validatorサンプル</title>
  7. </head>
  8. <body>
  9.     <form method="post" action="regist">
  10.         <div>
  11.             名前：<input type="text" name="name">
  12.         </div>
  13.         <div>
  14.             メールアドレス：<input type="text" name="email">
  15.         </div>
  16.         <div>
  17.             <input type="submit" value="登録">
  18.         </div>
  19.     </form>
  20. </body>
  21. </html>




b22_01.png


このアプリケーションにexpress-validatorによる入力値の検証を追加してみます。





express-validator



express-validatorをインストールします。


$ npm install express-validator



こちらを参考に処理を追加しました。
https://express-validator.github.io/docs/


・server.js


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. const { body, validationResult } = require('express-validator');
  7. app.set('view engine', 'ejs');
  8. app.use(express.urlencoded({ extended: true }));
  10. app.get('/', async (req, res, next) => {
  11.     res.render('index.ejs')
  12. });
  14. app.post('/regist',
  15.     body('name').isLength({ min: 1, max: 10 }), // nameは1文字以上10文字以下
  16.     body('email').isEmail(), // emailはメールアドレス形式
  17.     async (req, res, next) => {
  18.         // エラーの状況を取得
  19.         const errors = validationResult(req);
  20.         // エラーが発生していたら内容を取得し、画面に表示
  21.         if (!errors.isEmpty()) {
  22.             res.render('index.ejs', {errors: errors.array()});
  23.             return;
  24.         }
  25.         res.render('index.ejs');
  26. });
  29. app.listen(port, () => {
  30.     console.log(`Example app listening at http://localhost:${port}`);
  31. });




errors.array()で得られる内容は以下のような配列です。


  1. [
  2.  { value: '', msg: 'Invalid value', param: 'name', location: 'body' },
  3.  { value: '', msg: 'Invalid value', param: 'email', location: 'body' }
  4. ]



エラー発生時、内容を表示する処理をview側に追加します。


・views/index.ejs


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6.     <title>validatorサンプル</title>
  7. </head>
  8. <body>
  9.     <form method="post" action="regist">
  10.         <div>
  11.             名前：<input type="text" name="name">
  12.         </div>
  13.         <div>
  14.             メールアドレス：<input type="text" name="email">
  15.         </div>
  16.         <% if (typeof errors !== 'undefined') { %>
  17.         <div>
  18.             <ul>
  19.                 <% for (const error of errors) { %>
  20.                 <li><%= error.param %>:<%= error.msg %></li>
  21.                 <% } %>
  22.             </ul>
  23.         </div>
  24.         <% } %>
  25.         <div>
  26.             <input type="submit" value="登録">
  27.         </div>
  28.     </form>
  29. </body>
  30. </html>



名前、メールアドレス共に空白のまま登録ボタンを押すと、エラーが表示されました。

b22_02.png





検証ルールをまとめる



app.postの引数に検証ルールを直接記載せず、配列にまとめておいて指定することも可能です。


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. const { body, validationResult } = require('express-validator');
  7. app.set('view engine', 'ejs');
  8. app.use(express.urlencoded({ extended: true }));
  10. app.get('/', async (req, res, next) => {
  11.     res.render('index.ejs')
  12. });
  14. // ルールを配列でまとめる
  15. const registValidator = [
  16.     body('name').isLength({ min: 1, max: 10 }), // nameは1文字以上10文字以下,
  17.     body('email').isEmail(), // emailはメールアドレス形式
  18. ];
  20. app.post('/regist',
  21.     registValidator,
  22.     async (req, res, next) => {
  23.         // エラーの状況を取得
  24.         const errors = validationResult(req);
  25.         // エラーが発生していたら内容を取得し、画面に表示
  26.         if (!errors.isEmpty()) {
  27.             res.render('index.ejs', {errors: errors.array()});
  28.             return;
  29.         }
  30.         res.render('index.ejs');
  31. });
  34. app.listen(port, () => {
  35.     console.log(`Example app listening at http://localhost:${port}`);
  36. });



リストには、(req, res, next)の引数を持つ関数を割り当てればよいので、
こんな感じで、エラー処理もまとめてしまうことも可能です。


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. const { body, validationResult } = require('express-validator');
  7. app.set('view engine', 'ejs');
  8. app.use(express.urlencoded({ extended: true }));
  10. app.get('/', async (req, res, next) => {
  11.     res.render('index.ejs')
  12. });
  14. // ルールを配列でまとめる
  15. const registValidator = [
  16.     body('name').isLength({ min: 1, max: 10 }), // nameは1文字以上10文字以下,
  17.     body('email').isEmail(), // emailはメールアドレス形式
  18.     // エラー処理まで行ってしまう
  19.     async(req, res, next) => {
  20.         // エラーの状況を取得
  21.         const errors = validationResult(req);
  22.         // エラーが発生していたら内容を取得し、画面に表示
  23.         if (!errors.isEmpty()) {
  24.             res.render('index.ejs', {errors: errors.array()});
  25.             return;
  26.         }
  27.         // エラーが無ければnext呼び出し
  28.         next();
  30.     },
  31. ];
  33. app.post('/regist',
  34.     registValidator,
  35.     async (req, res, next) => {
  36.         res.render('index.ejs');
  37. });
  40. app.listen(port, () => {
  41.     console.log(`Example app listening at http://localhost:${port}`);
  42. });






メッセージの日本語化



エラーメッセージの内容はwithMessageで指定可能です。


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. const { body, validationResult } = require('express-validator');
  7. app.set('view engine', 'ejs');
  8. app.use(express.urlencoded({ extended: true }));
  10. app.get('/', async (req, res, next) => {
  11.     res.render('index.ejs')
  12. });
  14. // ルールを配列でまとめる
  15. const registValidator = [
  16.     // nameは1文字以上10文字以下
  17.     body('name').isLength({ min: 1, max: 10 }).withMessage('名前は1文字以上10文字以下で入力してください'),
  18.     // emailはメールアドレス形式
  19.     body('email').isEmail().withMessage('メールアドレスを入力してください'),
  20.     // エラー処理まで行ってしまう
  21.     async(req, res, next) => {
  22.         // エラーの状況を取得
  23.         const errors = validationResult(req);
  24.         // エラーが発生していたら内容を取得し、画面に表示
  25.         if (!errors.isEmpty()) {
  26.             res.render('index.ejs', {errors: errors.array()});
  27.             return;
  28.         }
  29.         // エラーが無ければnext呼び出し
  30.         next();
  32.     },
  33. ];
  35. app.post('/regist',
  36.     registValidator,
  37.     async (req, res, next) => {
  38.         res.render('index.ejs');
  39. });
  42. app.listen(port, () => {
  43.     console.log(`Example app listening at http://localhost:${port}`);
  44. });



b22_03.png




使用できるルール



validator.jsをラップしたものなので、こちらに掲載されているルールが使用できます。
https://github.com/validatorjs/validator.js




カスタムバリデーション



独自のルールを指定するには、customでルールを追加します。
例として、nameに「admin」は使用できないルールを追加してみます。


  1. const express = require('express');
  2. const app = express();
  3. const port = 3000;
  5. const { body, validationResult } = require('express-validator');
  7. app.set('view engine', 'ejs');
  8. app.use(express.urlencoded({ extended: true }));
  10. app.get('/', async (req, res, next) => {
  11.     res.render('index.ejs')
  12. });
  14. // ルールを配列でまとめる
  15. const registValidator = [
  16.     // nameは1文字以上10文字以下
  17.     body('name')
  18.         .isLength({ min: 1, max: 10 }).withMessage('名前は1文字以上10文字以下で入力してください')
  19.         .custom(value => {
  20.             // 独自ルール追加
  21.             if (value === 'admin') {
  22.                 throw new Error('名前に「admin」は使用できません')
  23.             }
  24.             return true;
  25.         }),
  26.     // emailはメールアドレス形式
  27.     body('email').isEmail().withMessage('メールアドレスを入力してください'),
  28.     // エラー処理まで行ってしまう
  29.     async(req, res, next) => {
  30.         // エラーの状況を取得
  31.         const errors = validationResult(req);
  32.         // エラーが発生していたら内容を取得し、画面に表示
  33.         if (!errors.isEmpty()) {
  34.             res.render('index.ejs', {errors: errors.array()});
  35.             return;
  36.         }
  37.         // エラーが無ければnext呼び出し
  38.         next();
  40.     },
  41. ];
  43. app.post('/regist',
  44.     registValidator,
  45.     async (req, res, next) => {
  46.         res.render('index.ejs');
  47. });
  50. app.listen(port, () => {
  51.     console.log(`Example app listening at http://localhost:${port}`);
  52. });



b22_04.png


関連記事
  • 2022/06/13(月) 22:23:30

Ubuntu 22.04 KVM + VirtFS でホストとゲスト間のファイルを共有する

KVMのホストとゲストでファイル共有
Ubuntu 20.04 KVM + VirtFS でホストとゲスト間のファイルを共有する

Ubuntu 22.04でも同じ手順で共有できるか確認。



QEMUのパーミッション設定



QEMUのパーミッション設定を変更しないと、共有ディレクトリのファイル読み込みはできるが、
書き込みが行えない状態となります。

QEMUの設定を変更し、rootではなくホストOSにログインしているユーザー権限で実行するよう修正します。


$ sudo vi /etc/libvirt/qemu.conf



変更内容は、user, groupの2箇所です。


# Some examples of valid values are:
#
#     user = "qemu" # A user named "qemu"
#     user = "+0"     # Super user (uid=0)
#     user = "100"    # A user named "100" or a user with uid=100
#
#user = "root"
user = "[ホストOSにログインしているユーザー名]"


# The group for QEMU processes run by the system instance. It can be
# specified in a similar way to user.
#group = "root"
group = "libvirt"





ハードウェアの追加




事前に共有を行うゲストOSをシャットダウンしておきます。
vert-managerのゲストOSの設定から、「ハードウェアを追加」を選択。

b21_01.png


ドライバー：virtio-9p
ソースパス：共有したいホストOSのパス
ターゲットパス：ゲストOSでマウント時に使用する名称



b21_02.png

追加すると、ゲストOSのデバイスに「ファイルシステム (ターゲットパスの名称)」の項目が追加されます。

b21_03.png

今回、ホストOSのパスは「/home/user/dev」
ターゲットパスは「dev」
としました。



ゲストOSにマウントポイントの追加




ゲストOSを起動し、適当にマウントポイントを作成します。


$ mkdir -p /home/user/dev




ゲストOSで以下のコマンドでマウントを実行


$ sudo mount -t 9p -o trans=virtio [ターゲットパス] [作成したマウントポイント]




今回の例だとこうなりました。


$ sudo mount -t 9p -o trans=virtio dev /home/user/dev




ゲストOSの「/home/user/dev」を見てみると、ホストOSの「/home/user/dev」にあるファイルが閲覧、編集できました。




/etc/fstab によるマウントの自動化



ゲストOS起動時、自動的にマウントされるようfstabを編集します。


$ sudo vi /etc/fstab



ファイル末尾に以下の内容を追記します。


[ターゲットパス] [ゲストOSのマウントポイント] 9p trans=virtio,version=9p2000.L,nobootwait,rw,_netdev 0 0



今回の例だと


dev /home/user/dev 9p trans=virtio,version=9p2000.L,nobootwait,rw,_netdev 0 0



となります。
リブートして動作確認。


$ sudo reboot



自動的にマウントできました。

関連記事
  • 2022/05/29(日) 21:43:41

Ubuntu Server 22.04にNode.js 16 LTSをインストール(volta使用)

Ubuntu Server 22.04にNode.jsのLTS,最新版をインストールしてみます。
voltaを使用するのがお手軽かと思います。
Ubuntu Server 20.04にNode.js 14.17.5 LTSと最新版(16.8.0)をインストール(Volta使用)



Volta




公式サイトの手順を参考にVoltaをインストールします。
https://volta.sh/


$ sudo curl https://get.volta.sh | bash



コマンドを実行すると、

success: Setup complete. Open a new terminal to start using Volta!



と表示されるので、指示通りターミナルを開き直します。
ターミナルを開き直したらvoltaコマンドを実行。


$ volta
Volta 1.0.7
The JavaScript Launcher ⚡



Volta バージョン1.0.7がインストールできました。




安定版、最新版のインストール



安定版(LTS)のインストールは、installオプションに「node」と指定します。


$ volta install node



実行すると、16.15.0をインストールしたログが表示されました。

success: installed and set node@16.15.0 (with npm@8.5.5) as default



念の為、バージョンを確認してみます。


$ node -v
v16.15.0

$ npm -v
8.5.5




最新版のインストールは、「node@latest」を指定します。


$ volta install node@latest



18.2.0がインストールできました。

success: installed and set node@18.2.0 (with npm@8.9.0) as default




現在のバージョンを確認してみます。


$ node -v
v18.2.0






使用バージョンの切り替え




使用するnodeのバージョンを変更する場合は、再度installを実行すればOKです。
LTS使用に戻してみます。


$ volta install node



これで、node v16に変更されました。


$ node -v
v16.15.0



関連記事
  • 2022/05/29(日) 18:30:33

SQLクライアント(GUIツール)　Execute QueryでMySQL 8に接続する

Execute Queryをインストールしました。
データベース接続ツール「Execute Query」をUbuntu 22.04へインストール(java.desktop does not "opens sun.awt.X11"対策)

こちらでインストール、設定したMySQL 8に接続してみます。
MySQL 8.0をUbuntu Server 22.04へインストール
Ubuntu Server 22.04 + MySQL 8 ユーザーの作成と別端末からの接続許可

接続情報は、
ホスト：192.168.11.101
ユーザー：admin
パスワード：P@ssw0rd
です。


JDBCドライバーの取得



MySQL用のJDBCドライバーを取得しておきます。
こちらが参考になるかと思います。
MySQL JDBCドライバのjarファイル mysql-connector-java-8.0.25.jarのみダウンロード(maven使用)



接続設定



データベースツリー左上の「New Connection」アイコンをクリック。
新規接続設定を開始します。
右側に表示された設定タブに情報を入力します。
「New Driver」をクリック。

b20_01.png


適当なDriver Nameを入力。
Databaseは「MySQLSQL」を指定します。
「Add Library」をクリックし、保存しておいたJDBCドライバーjarのパスを指定します。

b20_02.png

入力が　終わったら「Test」をクリックして接続できることを確認。

b20_03.png

無事データベースに接続し、内容を確認できました。

b20_04.png
関連記事
  • 2022/05/28(土) 18:24:02

Ubuntu HighDPI環境でJavaアプリケーションの表示サイズを拡大

Java製のアプリケーション「Execute Query」をUbuntu 22.04にインストールしました。
データベース接続ツール「Execute Query」をUbuntu 22.04へインストール(java.desktop does not "opens sun.awt.X11"対策)

起動することはできたのですが、画面に表示されるフォントサイズが小さく、
まともに使用することができません。

どうやら起動時にオプションを指定することで解消できそうです。


Dsun.java2d.uiScale



こちらが参考になりました。
[linux] HighDPI環境でJavaアプリケーションをまともな大きさで表示する方法

記事では解決しなかったとなっていますが、Execute Queryの場合は、

-Dsun.java2d.uiScale=2.0


オプションをつけることで解消できました。

起動スクリプトを編集。


$ sudo vi /usr/local/share/executequery/eq.sh




末尾の起動コマンドを以下のように変更します。


exec $JAVA --add-opens java.desktop/sun.awt.X11=ALL-UNNAMED -Dsun.java2d.uiScale=2.0 -mx${JAVA_HEAP_SIZE}m -jar "/usr/local/share/executequery/eq.jar" &



※2.0は拡大倍率の指定です。モニターの解像度によって、2.5や3.0等設定値を変更すると良さそうです。

これで目視できるサイズに変更できました。
関連記事
  • 2022/05/28(土) 18:03:44

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
https://symfo.web.fc2.com/

PR

検索フォーム


最新記事

カテゴリ

月別アーカイブ