【Vue.js】快適なバリデーションが設定できるVeeValidateを日本語化

VeeValidate非常に使いやすかったので紹介します。

VeeValidate
Input validation for Vue.js

VeeValidateを日本語化

日本語ファイルを読み込み、カスタム設定も読み込みます。
デフォルトのmessage.requiredに「!!」を付与しています。

// 日本語ファイルを読み込み
import ja from 'vee-validate/dist/locale/ja'
// 日本語ファイル上書き
const dict = {
    custom: {
        last_name: {
            required: '名は必須項目です'
        }
    },
    messages: {
        required: (n) => n + 'は必須項目です!!'
    }
};

このままでは「n」の箇所がnameの値になり、「firts_nameは必須です!!」というエラーが出力されます。
data-vv-as=”姓”でnameの値を変更することが出来ます。
以下の設定で「姓は必須です!!」というメッセージが出力されるようになります。

<div class="form-group">
    <label for="name" class="control-label">名前</label>
    <div class="row">
        <div class="col-md-6" v-bind:class="{ is_error: errors.has('first_name') }">
            <input id="first_name" type="text" name="first_name" class="form-control" placeholder="姓"
            v-model="user.user.first_name"
            v-validate="'required'"
            data-vv-as="姓"
            >
            <p v-if="errors.has('first_name')" class="form-message">{{ errors.first('first_name') }}</p>
        </div>
        <div class="col-md-6" v-bind:class="{ is_error: errors.has('last_name') }">
            <input id="last_name" type="text" name="last_name" class="form-control" placeholder="名"
                   v-model="user.user.last_name"
                   v-validate="'required'"
                   data-vv-as="名"
            >
            <p v-if="errors.has('last_name')" class="form-message">{{ errors.first('last_name') }}</p>
        </div>
    </div>
</div>

その他の使い方

{{errors.count()}}で簡単に残りのエラー数が取得出来たり、
以下のようなメソッドをsubmitボタンに設定しておけば、エラーの要素位置にスクロールすることが簡単に実装できます。

<script>
    export default {
        methods: {    
            register () {
                this.$validator.validateAll().then(() => {
                    var element = document.getElementById(this.errors.items[0].field);
                    element.scrollIntoView({behavior: 'smooth', block: 'center'});
                }).catch(() => {
                    alert(this.errors.all())
                })
            },
        }
    };
</script>

Vue.jsでフォームを実装する機会がありましたら、是非使ってみてください。

コメント