vue-model-validator

Model validator component for Vue.js

Installation

npm

$ npm install vue-model-validator

Usage

  var Vue = require('vue')
  var Validator = require('vue-model-validator')

  Vue.use(Validator)

  Vue.extend({
    created: function() {
      this.$watch_validations()
    },
    validate: {
      // can use multiple validations, vue directive style
      "user.email": "required, min_length: 3",
      "user.password": "required, min_length: 6"
      "user.password_confirmation": "required, min_length: 6"
      
    }
    methods: {
      on_create: function(e) {
        // checks all validations
        if(this.$validate()) {
        }
      },
      on_update: function(e) {
        // checks only user.email and user.password validations
        if(this.$validate("user.email", "user.password")) {
        }
      }
    }
  });

Options

watch

Whether or not validations should be run immediately on Vue instance initialization. default false

parse_all

Whether or not all validations should be run, or should validations be run until the first invalid result. default true

invalid_on_error

Whether or not validation should be valid in case of errors. default true

watch_options

Options passed to $watch default { deep: false, immediate: false, sync: false }

Properties

validation

For example, if you use required validator on the user.email model, then you will have model properties set up

    validation.user.email.invalid (true if any validations didn't pass)
    validation.user.email.required (true if the validation didn't pass)

Validators

build-in validator

required

  Vue.extend({
    validate: {
      "user.email": "required"
    }
  });

pattern

  Vue.extend({
    validate: {
      "user.email": "pattern: '.*'"
    }
  });

min-length

  Vue.extend({
    validate: {
      "user.email": "min_length: 3"
    }
  });

max-length

  Vue.extend({
    validate: {
      "user.email": "max_length: 255"
    }
  });

min

  Vue.extend({
    validate: {
      "user.images.length": "min: 1"
    }
  });

max

  Vue.extend({
    validate: {
      "user.images.length": "max: 3"
    }
  });

email

  Vue.extend({
    validate: {
      "user.email": "email"
    }
  });

equal-to

  Vue.extend({
    validate: {
      "user.password": "equal_to: user.password_confirmation"
    }
  });

custom

  Vue.extend({
    validate: {
      "user.images": "custom: myfunc"
    },
    methods: {
      myfunc: function(value) {
        return true;
      }
    }
  });

Adding/Overwriting validators

  Vue.validator("my_validator", function(field_name, value, directive, vm) {
    return true;
  });

License

MIT