node.js 초입문 노트 7(바리데이션편)

준비

다음 명령으로 패키지를 설치합니다.

npm install express-validator

유효성 검사 사용

다음을 수정합니다.

views/hello/add.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">
        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>
        <div role="main">
                <p><%- content %></p>
                <form action="/hello/add" method="post">
                    <div class="form-group">
                        <label for="name">NAME</label>
                        <input type="text" name="name" id="name" value="<%= form.name %>" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="mail">MAIL</label>
                        <td><input type="text" name="mail" id="mail" value="<%= form.mail %>" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="age">AGE</label>
                        <td><input type="number" name="age" id="age" value="<%= form.age %>" class="form-control">
                    </div>
                    <input type="submit" value="作成" class="btn btn-primary">
                </form>
        </div>
    </body>
</html>

routes/hello.js

const { check, validationResult } = require('express-validator');

router.get('/add', (req, res, next) => {
    var data = {
        title: 'Hello/Add',
        content: '新しいレコードを入力：',
        form: {name:'', mail:'', age:0}
    }
    res.render('hello/add', data);
});

router.post('/add', [
    check('name', 'NAME は必ず入力して下さい。').notEmpty(),
    check('mail', 'MAIL はメールアドレスを記入して下さい。').isEmail(),
    check('age', 'AGE は年齢(整数)を入力して下さい。').isInt()
], (req, res, next) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
        var result = '<ul class="text-danger">';
        var result_arr = errors.array();
        for(var n in result_arr) {
            result += '<li>' + result_arr[n].msg + '</li>'
        }
        result += '</ul>';
        var data = {
            title: 'Hello/Add',
            content: result,
            form: req.body
        }
        res.render('hello/add', data);
    } else {
        var nm = req.body.name;
        var ml = req.body.mail;
        var ag = req.body.age;

        db.serialize(() => {
            db.run('insert into mydata (name, mail, age) values (?, ?, ?)', nm, ml, ag);
    });
    res.redirect('/hello');
    }
});

다음 URL에서 유효성 검사를 확인할 수 있습니다.

위생화 방법

양식의 내용을 저장하고 표시할 때 HTML이나 JavaScript의 실행을 방지하기 위해 다음과 같이 수정합니다.

routes/hello.js

router.post('/add', [
    check('name', 'NAME は必ず入力して下さい。').notEmpty().escape(),
    check('mail', 'MAIL はメールアドレスを記入して下さい。').isEmail().escape(),
    check('age', 'AGE は年齢(整数)を入力して下さい。').isInt()
],

다음은 sanitization 결과입니다.

맞춤 검증

예를 들어 이번에는 연령을 입력 범위를 지정합니다.
다음과 같이 수정합니다.

routes/hello.js

router.post('/add', [
    check('name', 'NAME は必ず入力して下さい。').notEmpty().escape(),
    check('mail', 'MAIL はメールアドレスを記入して下さい。').isEmail().escape(),
    check('age', 'AGE は年齢(整数)を入力して下さい。').isInt(),
    check('age', 'AGE はゼロ以上120以下ので入力ください。').custom(value =>{
        return value >= 0 & value <= 120;
    })

Reference

이 문제에 관하여(node.js 초입문 노트 7(바리데이션편)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Glider2355/items/7f4551c52b77131df6e8

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다