Vue

by kabanoki

HTML

<div id="app">
  <validation-observer ref="obs" v-slot="{invalid, validated, valid}">
    <div class="filed">
      <validation-provider name="field1" rules="required|my_rule:field2">
        <div slot-scope="{ errors }">
          <input type="text" name="field1" v-model="value" value="">
          <p class="error">{{ errors[0] }}</p>
        </div>
      </validation-provider>
      <validation-provider vid="field2" name="field2" rules="required">
          <div slot-scope="{ errors }">
            <input type="text" name="field2" v-model="value2" 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: [{
    name: 'str',
    isTarget: true
  }],
  message: '{_field_}の値と{_target_}の値"{str}"が一致しません。',
  validate(value, {str}) {
    return value == str;
  }
};

VeeValidate.extend('my_rule', myRule);

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