Edited at

フロントサイドのバリデーションにはvalidatorjsが便利

More than 1 year has passed since last update.

Webフォームのバリデーションをするのって面倒ですよね。どうせサーバサイドでバリデーションするのに…。

といいつつも、利用者を苛つかせないためにも、無駄な通信を減らすためにもフロントサイドのバリデーションは重要です。

何か良いライブラリが無いかなと思ってgithubを漁っていたら、良さげなライブラリを見つけました。

validatorjs

"A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator."とあるとおり、LaravelのValidatorに似た感じになっているのが特徴です。

Laravelといえば、JSはreact.jsではなくてvue.jsだろうということで、Vueのコンポーネントでのサンプルです。(CSSはBootstrap)

もちろんこのライブラリはvue.jsに依存しているわけではありませんので、汎用バリデータとして使用できます。


sample.vue

<template lang="pug">

div
h2 Search
form.form.form-horizontal
.form-group(:class="{ 'has-error' : errors.query }")
label.control-label.col-xs-1 query
.col-xs-11
input.form-control(ref='query')
span.help-block(v-if='errors.query') {{ errors.query }}
.form-grup
.col-xs-offset-1
button.btn.btn-default(type='button', @click='search') Search
</template>

<script>
'use strict';
var Validator = require('validatorjs');
Validator.useLang('ja');

module.exports = {
data: function(){
return {
errors: {
query: ''
}
};
},

methods: {
search: function(){
var v = new Validator({ // validate するデータ
query: this.$refs.query.value
}, { // validate ルール
query: 'required'
});

var pass = v.check();

// エラーをセット(エラーなしの場合は、nullで上書きする)
this.errors = {
query: v.errors.first('query')
};

if(pass){
// validate OKの場合の処理...
}
}
}
}
</script>


これはvue.jsの特徴ですが、this.errorsをリアクティブなデータとしているので、これの値を変えるだけでdiv.form-grouphas-errorクラスを設定して赤くしたり、エラーメッセージを(span.help-block)表示したりできるのが楽で嬉しいですね。

スクリーンショット 2017-03-12 17.11.00.png

組み込みで用意されているルールは


  • accepted

  • alpha

  • alpha_dash

  • alpha_num

  • array

  • between:min,max

  • boolean

  • confirmed

  • date

  • digits:value

  • different:attribute

  • email

  • in:foo,bar,...

  • integer

  • max:value

  • min:value

  • not_in:foo,bar,...

  • numeric

  • required

  • required_if:anotherfield,value

  • required_unless:anotherfield,value

  • required_with:foo,bar,...

  • required_with_all:foo,bar,...

  • required_without:foo,bar,...

  • required_without_all:foo,bar,...

  • same:attribute

  • size:value

  • string

  • url

  • regex:pattern

と充実してます。カスタムルールを作る必要は無いかもしれません。もちろんエラーメッセージのカスタムも可能です。

JSの標準のバリデーションライブラリになってくれると良いなと思います。

良いライブラリを見つけられた日曜の午後でした。

追記: 予想外の「いいね」を頂いたので、調子に乗って関連記事を書きました。よかったらこちらもご参照ください。

validatorjsのカスタムルールを書くときの注意点