vee-validation example#2

alpha series

by pdo99

HTML

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7/dist/vee-validate.js"></script>
<div id="app">
  <p>
    <h4>option: required and alpha</h4>
    <input v-validate="'required|alpha'" type="text" name="num01">
    <br>
    <span v-if="errors.has('num01')">{{ errors.first('num01') }}</span>
  </p>
  <p>
    <h4>option: alpha_dash</h4>
    <input v-validate="'alpha_dash'" type="text" name="num02">
    <br>
    <span v-if="errors.has('num02')">{{ errors.first('num02') }}</span>
  </p>
  <p>
    <h4>option: alpha_num</h4>
    <input v-validate="'alpha_num'" type="text" name="num03">
    <br>
    <span v-if="errors.has('num03')">{{ errors.first('num03') }}</span>
  </p>
  <p>
    <h4>option: alpha_spaces</h4>
    <input v-validate="'alpha_spaces'" type="text" name="num04">
    <br>
    <span v-if="errors.has('num04')">{{ errors.first('num04') }}</span>
  </p>
  <p>
    <h4>option: regex(カタカナ)</h4>
    <input v-validate="'regex:^([ァ-ヴ][ァ-ヴー・]*)$'" type="text" name="num06">
    <br>
    <span v-if="errors.has('num06')">{{ errors.first('num06') }}</span>
  </p>
</div>

JavaScript

Vue.use(VeeValidate);

var app = new Vue({
	el: '#app',
    methods: {
    },
});