Plato-validator NPM

PLATO-VALIDATOR

:heavy_check_mark: A Simple Validator Plugin for Vue.

Not just a form validator, could validate any components that has own a property named value, also works in nested components.

Usage

install plugin

import Vue from 'vue'
import Validator from 'plato-validator'

Vue.use(Validator)

use `$validate` and `$validation` in components

export default {
  ...
  // required
  validator: {},
  ...
  data () {
    return {
      value: '',
      validate: {
        required: {
          rule: true,
          message: 'value is required!'
        }
      }
    }
  },
  ready () {
    this.$validate().then(() => {
      // success
    }).catch($validation => {
      // failure
    })
  }
}

<template>
  <!-- 表单项的值变化自动触发校验 -->
  <c-form ...></c-form>
  <!-- 使用校验结果 -->
  <c-validation
    :validation="$validation"></c-validation>
</template>

<script>
import CForm from 'components/c-form'
import CValidation from 'components/c-validation'
export default {
  ...
  validator: {
    // 初始化后自动检查
    auto: true
  },
  ...
  methods: {
    submit () {
      // 手动执行校验，返回 Promise 对象
      this.$validate().then(() => {
        // success
      }).catch($validation => {
        // failure
      })
    }
  },
  components: {
    CForm,
    CValidation
  }
}
</script>