Get started with vue-validator CDN

MIT licensed

Vue-validator is a validation library for Vue.js applications.

Tags:
  • plugin
  • validation
  • vue

Stable version

Copied!

How to start using vue-validator CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with vue-validator CDN - cdnhub.io</title>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.12/dist/vue-router.min.js"></script>
  <script src="https://cdn.cdnhub.io/vue-validator/2.1.7/vue-validator.min.js"></script>
</head>
<body>
  <div id="app">
    <form @submit.prevent="validateForm">
      <input v-model="email" type="email" name="email" class="form-control" :class="{ 'is-invalid': $v.email.$error }" placeholder="Email">
      <span class="invalid-feedback" v-if="$v.email.$error">{{ $v.email.$errors[0].$message }}</span>

      <input v-model="password" type="password" name="password" class="form-control" :class="{ 'is-invalid': $v.password.$error }" placeholder="Password">
      <span class="invalid-feedback" v-if="$v.password.$error">{{ $v.password.$errors[0].$message }}</span>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script>
    Vue.use(Vue);
    Vue.use(VueRouter);
    Vue.use(VueValidator);

    const router = new VueRouter({
      mode: 'div',
      routes: []
    });

    const app = new Vue({
      el: '#app',
      router,
      data: {
        email: '',
        password: '',
        $valid: false
      },
      validations: {
        email: { required, email },
        password: { required, minLength: minLength(6) }
      },
      methods: {
        validateForm() {
          this.$v.$touch();
          this.$valid = this.$v.$invalid;
        }
      }
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions