最近 validatorjs というバリデーションライブラリを使ったのですが、結構よかったので紹介したいと思います。
使い方
インストール
$ npm install validatorjs
サンプルコード
sample.js
import Validator from 'validatorjs'
// 検証するデータ
const data = {
name: 'D',
email: 'not an email address.com'
}
// バリデーションルール
const rules = {
name: 'size:3',
email: 'required|email'
}
const validation = new Validator(data, rules)
// 結果
validation.fails() // true
validation.passes() // false
// エラー
validation.errors.get('email') // ['The email format is invalid.']
validation.errors.first('email') // 'The email format is invalid.'
validation.errors.all() // { name: ['The name must be 3 characters.'], email: ['The email format is invalid.']}
ルールは配列でも記述できます
const rules = {
name: ['size:3'],
email: ['required', 'email']
}
エラーメッセージをカスタマイズする
デフォルトでは英語なので、日本語にしたいです
Validator.useLang('ja')
独自の文言を設定することも可能です
const customErrorMessages = {
required: ':attribute は必須です' // :attribute でフィールド名を参照できます
}
const validation = new Validator(data, rules, customErrorMessages)
使用できるルール
必須チェック、文字数チェック、正規表現、メールなど、よく使うようなものは揃っています
オリジナルのルールが必要な場合はカスタムルールを登録できます
カスタムルールの登録
// Validator.register(name, callbackFn, errorMessage)
Validator.register(
'telephone',
function(value, requirement, attribute) {
return value.match(/^\d{3}-\d{3}-\d{4}$/)
},
'XXX-XXX-XXXX の形式で入力してください'
)
Register Custom Validation Rules
メリット
- ちょこっとバリデーションしたいときに入れやすい
- シンプルなので柔軟性がある
デメリット
- いろんな処理は自分で書く必要あり
- バリデーションの実行タイミング
- エラーの管理 など
まとめ
普通のフォームだったら Vue.js の場合は VeeValidator や Vuelidate を使うほうが楽かなと思います。
エラーの管理とかinput時に自動でバリデーションとかしてくれたと思うので・・・🤔
今回は表のような大量のデータにバリデーションをかけたくて、
UI ライブラリとの相性や体感速度の面でそれらを使えなくて validatorjs を選びました。
エラーの管理などは自分で実装しなければいけませんでしたが、
バリデーションのタイミングを柔軟にできたり、1つのデータが変更されただけなのに処理が重くなる、
みたいなことを避けられたのでよかったです。