vue-validator

• 3.8k before gzipped

Install

Note: the "vue-validator" on NPM refers to https://github.com/kazupon/vue-validator.

$ npm install --save @jiubao/vue-validator

$ yarn add @jiubao/vue-validator

// using ES6 modules
import validator from '@jiubao/vue-validator/dist/vue-validator.es'

The UMD build is available on unpkg:

<script src="https://unpkg.com/@jiubao/vue-validator"></script>

Usage

basic

import validator from '@jiubao/vue-validator'
Vue.use(validator)

data: {
  name: 'jiubao',
  ruleRequired: {
    required: true
  }
}

<input v-validator="ruleRequired" v-model="name" type="text">

more

import validator from '@jiubao/vue-validator'
var errorClass = 'validate-fail'
Vue.use(validator, {
  onError: (validatorInstance) => {
    addClass(validatorInstance.el, errorClass)
  },
  onSuccess: (validatorInstance) => {
    removeClass(validatorInstance.el, errorClass)
  }
})

data: {
  employee: {
    name: 'jiubao',
    age: 10
  },
  phone: '18737373737',
  ruleRequired: {
    required: true
  },
  ruleMobile: {
    rules: [{
      key: 'mobile'
    }],
    required: true
  },
  ruleNumber: {
    rules: [{
      key: 'number'
    }, {
      key: 'max',
      value: 200
    }, {
      key: 'min',
      value: 30
    }]
  },
  ruleLength: {
    rules: [{
      key: 'max_length',
      value: 6
    }, {
      key: 'min_length',
      value: 2
    }]
  }
}

<input v-validator:employee$name.init="ruleRequired" v-model="employee.name" type="text" name="" value="">
<input v-validator:phone="ruleMobile" v-model="phone" type="text">
<input v-validator="ruleNumber" type="text">
<input v-validator="ruleLength" type="text">
<input v-validator="'required|number|max:100|min:0'" v-model="employee.age" type="text">
<span v-validator="'required'" data-vv-path="employee.age"> {{employee.age}} </span>&nbsp;
<span v-validator:employee$age="'required|number|max:100|min:0'">{{employee.age}}</span>
<button type="button" :disabled="!validate$pass">submit</button>

API

this.validate$pass
this.$$validator.pass(this)
Vue.prototype.$$validator.all()

• this.validate$pass
• Vue.prototype.$$validator
  • add
  • all
  • pass
  • find
  • destroy

Todos

• ~~rm install~~
• ~~cannot trigger input if not on input/textarea~~
• ~~cannot trigger input if changed by code~~
• ~~readme~~
• ~~employee$name~~
• ~~directive unbind~~
• ~~manage validators in factory (by component)~~
• ~~destroy validators when component unmounted~~
• ~~ref factory on Vue.prototype~~
• ~~initial validate~~
• ~~directive update~~
• ~~decimal~~
• ~~expose rules && add rule~~
• ~~error~~
• promise validate
• if change rule obj (not replace), can't reactive the change (bind: value === oldValue)
• scope validate: scope on component
• *.es *.umd *.cjs
• jest