概要

Backbone.jsのモデルで入力検証のやり方を調べてみる

ローカル環境準備

dockerでnginxを起動して環境を整える。

ターミナル

$ docker-compose build
$ docker-compose up -d

※ 学習ように作ったコードはgithubにアップしています
https://github.com/reflet/sample-backbone.js

サンプルコード

Modelで入力検証するサンプルを作ってみる。

./src/html/model2-validate.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Backbone.js学習 [Model]</title>
</head>
<body>
    <h1>Model - 入力検証</h1>
    <p>モデルで入力検証をやってみる</p>

    <script src="https://cdn.jsdelivr.net/npm/underscore@1.9.1/underscore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/backbone@1.4.0/backbone.min.js"></script>
    <script>
        const Person = Backbone.Model.extend({
            initialize: function (attrs, options) {
                console.log('initialize', attrs, options);
            },
            validate: function (attrs) {
                console.log('validate', attrs);

                var errors = [];
                if (_.isEmpty(attrs.name)) {
                    errors.push({name: 'name', message: '名前が入力されていません'});
                }
                if (_.isEmpty(attrs.age)) {
                    errors.push({name: 'age', message: '年齢が入力されていません'});
                }
                return errors.length > 0 ? errors : false;
            }
        });

        const hanako = new Person();
        hanako
            .bind('invalid', function (model, error) {
                console.log('invalid', error);
            })
            .bind('change', function(){
                console.log('change');
            })
            .bind('change:name', function(){
                console.log("change:name");
            });

        var check = hanako.set({name: '', age: ''}, {validate: true}); // validate option required!!
        if (check !== false) {
            console.log('success', hanako.toJSON());
        } else {
            console.log('error', hanako.toJSON());
        }
    </script>
</body>
</html>

動作確認
正常に入力検証ができたようです。

まとめ

下記のように個別にデータをセットしてvalidate実行したかったが、うまく行かず断念。

サンプル

hanako.set('name', '');
hanako.set('age', '');
if (hanako.validate === true) {
    console.log('success', hanako.toJSON());
} else {
    console.log('error', hanako.errors);
}

validateionなどのプラグインなどを追加したらできそうな感じがするが、
今回は標準機能を学習するためここではやらないことにします。

参考サイト

以上

Backbone.js - モデル(Validate)

概要

ローカル環境準備

サンプルコード

まとめ

参考サイト