Vee Validate

Vee Validate

安装

yarn add vee-validate S

ES6+

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { ValidationProvider, ValidationObserver } from 'vee-validate'

import './local/vee-validate'

// Register it globally
Vue.component('ValidationObserver', ValidationObserver)
Vue.component('ValidationProvider', ValidationProvider)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

配置

import { extend, configure } from 'vee-validate'
// import { required, email } from 'vee-validate/dist/rules'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/zh_CN.json'
// alpha
// alpha_dash
// alpha_num
// alpha_spaces
// between
// confirmed
// digits
// dimensions
// email Inferred
// excluded
// ext
// image
// oneOf
// integer
// is
// is_not
// length
// max Inferred
// max_value Inferred
// mimes
// min Inferred
// min_value Inferred
// numeric
// regex Inferred
// required Inferred
// required_if
// size
// double

// Add a rule.
extend('secret', {
  validate: value => value === 'example',
  message: 'This is not the magic word'
})

extend('positive', {
  validate: value => value > 0,
  message: '请输入大于0'
})

extend('odd', value => {
  return value % 2 !== 0
})

extend('min', {
  validate: (value, arg) => {
    return value.length > arg.length
  },
  params: ['length'],
  message: (fieldName, placeholders) => {
    return `${fieldName}必须大于${placeholders.length}位数`
  }
})

// extend('required', {
//   ...required,
//   message: '请输入{_field_}'
// })

// extend('email', {
//   ...email,
//   message: '请输入正确的邮箱'
// })

Object.keys(rules).forEach(rule => {
  extend(rule, rules[rule])
})

Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule], // copies rule configuration
    message: messages[rule] // assign message
  })
})

configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid',
    dirty: ['is-dirty', 'is-dirty'] // multiple classes per flag!
    // ...
  }
})

代码

ex1

 核心ValidationObserver，ValidationProvider

 表单验证handleSubmit，reset

ex2

 $refs