vinput

easy validate component for Vue2

Usage no npm install needed!

<script type="module">
  import vinput from 'https://cdn.skypack.dev/vinput';
</script>

README

vinput 0.0.1

Easy input validate component for Vue2

Install

npm install vinput --save

Usage

import vInput from 'vinput'
Vue.use(vInput, {
  // name: 'v-input',
  // default component name is v-input
  rules: {
    // add rules here
    number (v) {
      return !isNaN(v)
    }
  }
})

<v-input v-model="test" style="" 
  rule="number | ^[0-9]{2}quot; 
  :styles="{success: 'border-color:green;', fail: 'border-color:red;'}"
>
  <!--<span slot="success">success message</span>-->
  <span slot="fail">fail message</span>
</v-input>

v-model: the v-model for input
style: style for label optional
styles(object): styles for input (success/fail) optional
rule: rule for this input (rules/RegExp)
slot success: show when success optional
slot fail: show when fail optional

export default {
  data () {
    return {
      test: 12345
    }
  }
}