VeeValidate

by kabanoki

HTML

<script>window.Promise || document.write('<script src="https:\/\/www.promisejs.org\/polyfills\/promise-7.0.4.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vee-validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rules.umd.min.js"></script>

<div id="app">
  <validation-observer ref="observer" v-slot="observer">
    <div class="filed">
        <h2>alpha</h2>
        <validation-provider name="alpha" rules="alpha">
          <div slot-scope="ProviderProps">
            <input name="alpha" v-model="alpha">
            <p class="error">{{ ProviderProps.errors[0] }}</p>
          </div>
        </validation-provider>
    </div>
    <div class="filed">
        <h2>alpha_dash</h2>
        <validation-provider name="alpha_dash" rules="alpha_dash">
          <div slot-scope="ProviderProps">
            <input name="alpha_dash" v-model="alpha_dash">
            <p class="error">{{ ProviderProps.errors[0] }}</p>
          </div>
        </validation-provider>
    </div>
    <div class="filed">
        <h2>alpha_num</h2>
        <validation-provider name="alpha_num" rules="alpha_num">
          <div slot-scope="ProviderProps">
            <input name="alpha_num" v-model="alpha_num">
            <p class="error">{{ ProviderProps.errors[0] }}</p>
          </div>
        </validation-provider>
    </div>
    <div class="filed">
        <h2>alpha_spaces</h2>
        <validation-provider name="alpha_spaces" rules="alpha_spaces">
          <div slot-scope="ProviderProps">
            <input name="alpha_spaces" v-model="alpha_spaces">
            <p class="error">{{ ProviderProps.errors[0] }}</p>
          </div>
        </validation-provider>
    </div>
    <div class="filed">
        <h2>between</h2>
        <validation-provider name="between" rules="between:1,11">
          <div slot-scope="ProviderProps">
   ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.error {
  color: #f00;
}

.filed {
  padding: 20px;
  width: 315px;
}

JavaScript

const VeeValidate = window.VeeValidate;
const VeeValidateRules = window.VeeValidateRules;

const ValidationProvider = VeeValidate.ValidationProvider;
const ValidationObserver = VeeValidate.ValidationObserver;

const ja = {
  "code": "ja",
  "messages": {
    "alpha": "{_field_}はアルファベットのみ使用できます",
    "alpha_num": "{_field_}は英数字のみ使用できます",
    "alpha_dash": "{_field_}は英数字とハイフン、アンダースコアのみ使用できます",
    "alpha_spaces": "{_field_}はアルファベットと空白のみ使用できます",
    "between": "{_field_}は{min}から{max}の間でなければなりません",
    "confirmed": "{_field_}が一致しません",
    "digits": "{_field_}は{length}桁の数字でなければなりません",
    "dimensions": "{_field_}は幅{width}px、高さ{height}px以内でなければなりません",
    "email": "{_field_}は有効なメールアドレスではありません",
    "excluded": "{_field_}は不正な値です",
    "ext": "{_field_}は有効なファイル形式ではありません",
    "image": "{_field_}は有効な画像形式ではありません",
    "is": "{_field_}が一致しません",
    "length": "{_field_}は{length}文字でなければなりません",
    "max_value": "{_field_}は{max}以下でなければなりません",
    "max": "{_field_}は{length}文字以内にしてください",
    "mimes": "{_field_}は有効なファイル形式ではありません",
    "min_value": "{_field_}は{min}以上でなければなりません",
    "min": "{_field_}は{length}文字以上でなければなりません",
    "numeric": "{_field_}は数字のみ使用できます",
    "oneOf": "{_field_}は有効な値ではありません",
    "regex": "{_field_}のフォーマットが正しくありません",
    "required": "{_field_}は必須項目です",
    "required_if": "{_field_}は必須項目です",
    "size": "{_field_}は{size}KB以内でなければなりません"
  }
};

for(let key in ja.messages) {
  VeeValidate.extend(key, VeeValidateRules[key]);
}

VeeValidate.localize('ja', ja);

Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);

let app = new Vue({
  el: '#app',
  data: {
    alpha: '',
    alpha_dash: '',
    alpha_num: '',
    alpha_spaces: '',
    between: '',
    confirmed: '',
    digits: '',
    dimensions: '',
    email: '',
    ext: '',
    image: '',
    oneOf: '',
    integer: '',
    is: '',
    is_not: '',
    length: '',
    max: '',
    max_value: '',
    mimes: '',
    min: '',
    min_value: '',
   ...