Vue Rules

Install

 const VueRules = require('vue-rules')
// or import * as VueRules from 'vue-rules'

Vue.use(VueRules)

Use

 {
  name: 'SomeComponent',

  data() {
    return {
      rules: {
        name: { minlength: 2 },
        email: { email: true },
        age: { number: true, min: 18 },
        // ...
      }
    }
  },

  methods: {
    submit() {
      if (!this.rules.$validate()) { return }
      // ...
    }
  }
}

 <form v-rules="rules">

  <div class="form-group" :class="rules.name.error && 'has-danger'">
    <label>Name</label>
    <input type="text" name="name" class="form-control">
    <div v-show="rules.name.error" class="form-control-feedback">{{ rules.name.error }}</div>
  </div>

  <div class="form-group" :class="rules.email.error && 'has-danger'">
    <label>Email address</label>
    <input type="email" name="email" class="form-control">
    <div v-show="rules.email.error" class="form-control-feedback">{{ rules.email.error }}</div>
  </div>

  <div class="form-group" :class="rules.age.error && 'has-danger'">
    <label>Age</label>
    <input type="text" name="age" class="form-control">
    <div v-show="rules.age.error" class="form-control-feedback">{{ rules.age.error }}</div>
  </div>

</form>

Built-in validations

{ minlength: x }

Checks the input length is equal or bigger than x

{ maxlength: x }

Checks the input length is less or equal to x

{ length: [ x, y ] }

Checks the input length is equal or bigger than x and less or equal to y

{ number: true }

Checks the input is a number

{ number: true, min: x }

Checks the input is a number and it's value is equal or bigger than x

{ number: true, max: x }

Checks the input is a number and it's value is less or equal to x

{ number: true, range: [ x, y ] }

Checks the input is a number and it's value is equal or bigger than x and less or equal to y

{ email: true }

Checks the input is a valid email address

{ optional: true }

All fields mentioned in rules are required by default.


When using this option the field will validated only if it has some value.


If no value inserted the field is simply ignored.