express-validatorモジュールでフォームから送信された値のバリデーションチェックの実装をしてみます。
本記事ではExpressを利用しています。「app.js」「index.ejs」ファイルの作成については下記の関連ページをご参照下さい。
関連ページ
express-validatorモジュールを利用します。
|
1 |
npm install --save express-validator |
package.jsonのdependenciesの項目にexpress-validatorが追加されます。
|
1 2 3 4 5 6 |
"dependencies": { "body-parser": "^1.18.3", "ejs": "^2.6.1", "express": "^4.16.4", "express-validator": "^5.3.1" } |
本記事では、メールアドレスとパスワードのバリデーションをおこなうアプリを作成します。
正しい形式のメールアドレスとパスワードを入力すると「OKです」と表示されます。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
const express = require('express') const ejs = require('ejs') const bodyParser = require("body-parser") const { check, validationResult } = require('express-validator/check'); const app = express() app.set('ejs', ejs.renderFile) app.use(bodyParser.urlencoded({ extended: false })) app.get("/", (req, res) => { res.render("./index.ejs", { email: '', password: '', errorMessage: '', correctMessage:'' }) }); app.post("/", [ check('email') .isEmail().withMessage('メールアドレスを入力して下さい'), check('password') .isLength({ min: 5 }).withMessage('パスワードは5文字以上です') .matches(/\d/).withMessage('パスワードに数値を含めて下さい') ], (req, res) => { const errors = validationResult(req) if (!errors.isEmpty()) { const errors_array = errors.array() res.render('./index.ejs', { email: req.body.email, password: req.body.password, errorMessage: errors_array, correctMessage:'' }) } else { res.render('./index.ejs', { email: req.body.email, password: req.body.password, errorMessage: '', correctMessage: 'OKです' }) } }); app.listen(3000, () => { console.log('start') }) |
22〜26行目
postメソッドの第2引数でそれぞれのパラメーターをチェックしています。.isEmail()などのメソッドはValidatorsに一覧として記載されています。メソッドチェーンによりwithMessage()でエラー時のメッセージを設定できます。何も設定しない場合、デフォルトでは「Invalid value」と表示されます。
index.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action="/" method="post"> <p>メール：<input type="text" name="email" value="<%= email %>"></p> <p>パスワードは5文字以上で数値を含むこと：<input type="password" name="password" value="<%= password %>"></p> <p><button type="submit" name="button">確認</button></p> </form> <% if(errorMessage) { %> <ul> <% for (let n in errorMessage) { %> <li> <%= errorMessage[n].msg %> </li> <% } %> </ul> <% } %> <% if(correctMessage) { %> <%= correctMessage %> <% } %> </body> </html> |
参照ページ
