Vue form validation vee-validate is simple to use

http://vee-validate.logaretm.com/examples.html

 

simple example

Email format verification is used, and the verification time is delayed 1s and initial verification, in addition to pre-submission verification and asynchronous verification

For more examples, see the official website demo

This module is relatively large after compression

code

<template>
  <div class="columns is-multiline">
    <div class="column is-12">
      <label class="label">Email</label>
      <p class="control has-icon has-icon-right">
        <input name="email" v-model="email"
               v-validate="'required|email'"
               data-vv-delay="1000"
               :class="{'input': true, 'is-danger': errors.has('email') }"
               type="text"
               placeholder="Email">
        <i v-show="errors.has('email')" class="fa fa-warning"></i>
        <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
      </p>
    </div>
    <div class="column is-12">
      <label class="label">First Name</label>
      <p class="control has-icon has-icon-right">
        <input name="first_name"
               v-model="first_name"
               v-validate.initial="'required|alpha'"
               :class="{'input': true, 'is-danger': errors.has('first_name') }"
               type="text"
               placeholder="First Name">
        <i v-show="errors.has('first_name')" class="fa fa-warning"></i>
        <span v-show="errors.has('first_name')" class="help is-danger">{{ errors.first('first_name') }}</span>
      </p>
    </div>


  </div>
</template>

<script>
  export default {
    name: "form-test",
    data: () => ({
      email: '',
      first_name: '',
      last_name: ''
    }),
    computed: {
      name() {
        return `${this.first_name} ${this.last_name}`;
      }
    }
  }
</script>

 

Effect

The error message of the first one is displayed after a second, while the second one is validated at the beginning