프론트 사이드 밸리데이션에는 validatorjs가 편리

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-group 에 has-error 클래스를 설정해 붉게 하거나, 에러 메세지를( span.help-block ) 표시한다 쉽고 기쁘 네요.



내장으로 준비된 규칙은

accepted

알파

alpha_dash

alpha_num

array

between:min,max

부울

confirmed

date

digits:value

different:attribute

email

in:foo,bar,...

integer

max:value

min:value

not_in:foo,bar,...

숫자

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

문자열

url

regex:pattern

그리고 충실합니다. 맞춤 규칙을 만들 필요가 없을 수도 있습니다. 물론 오류 메시지의 사용자 정의도 가능합니다.
JS의 표준 밸리데이션 라이브러리가 되어 주면 좋다고 생각합니다.

좋은 도서관을 찾은 일요일 오후였습니다.

추기: 예상외의 「좋아요」를 받았으므로, 음색을 타고 관련 기사를 썼습니다. 좋으면 여기도 참조하십시오.
validatorjs의 사용자 정의 규칙을 작성할 때의주의 사항