Vue

by kabanoki

HTML

<div id="app">
  <validation-observer ref="obs" v-slot="{invalid, validated, valid}">
    <div class="filed">
      <validation-provider name="my_rule" rules="required|my_rule:kabanoki">
        <div slot-scope="{ errors }">
          <input type="text" name="my_rule" v-model="value" value="">
          <p class="error">{{ errors[0] }}</p>
        </div>
      </validation-provider>
    </div>
    <button type="button" @click="submit" :disabled="!valid">送信</button>
  </validation-observer>
</div>
<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>

CSS

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

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

button:disabled {
  cursor:not-allowed;
}

Vue

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

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

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

//required rule
VeeValidate.extend('required', VeeValidateRules['required']);

//custom rule
const myRule = {
  params: ['str'],
  message: '{_field_}が{str}と一致しません。',
  validate(value, {str}) {
    return value == str;
  }
};
VeeValidate.extend('my_rule', myRule);

let app = new Vue({
  el: '#app',
  data: {
    value: '',
  },
  methods: {
    submit: function(){
      alert('送信しました！');
    }
  }
});