JS でシンプルにバリデーションしたい #JavaScript

最近 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')

Language Support

独自の文言を設定することも可能です

const customErrorMessages = {
  required: ':attribute は必須です' // :attribute でフィールド名を参照できます
}

const validation = new Validator(data, rules, customErrorMessages)

Custom Error Messages

使用できるルール

必須チェック、文字数チェック、正規表現、メールなど、よく使うようなものは揃っています
オリジナルのルールが必要な場合はカスタムルールを登録できます

Available Rules

カスタムルールの登録

// Validator.register(name, callbackFn, errorMessage)

Validator.register(
  'telephone',
  function(value, requirement, attribute) {
    return value.match(/^\d{3}-\d{3}-\d{4}$/)
  },
  'XXX-XXX-XXXX の形式で入力してください'
)

メリット

ちょこっとバリデーションしたいときに入れやすい
シンプルなので柔軟性がある

デメリット

いろんな処理は自分で書く必要あり
- バリデーションの実行タイミング
- エラーの管理　など

まとめ

普通のフォームだったら Vue.js の場合は VeeValidator や Vuelidate を使うほうが楽かなと思います。
エラーの管理とかinput時に自動でバリデーションとかしてくれたと思うので・・・🤔

今回は表のような大量のデータにバリデーションをかけたくて、
UI ライブラリとの相性や体感速度の面でそれらを使えなくて validatorjs を選びました。
エラーの管理などは自分で実装しなければいけませんでしたが、
バリデーションのタイミングを柔軟にできたり、1つのデータが変更されただけなのに処理が重くなる、
みたいなことを避けられたのでよかったです。