9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Phone AppliAdvent Calendar 2020

Day 11

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

Last updated at Posted at 2020-12-10

最近 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 の形式で入力してください'
)

Register Custom Validation Rules

メリット

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

デメリット

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

まとめ

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

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

9
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?