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

<template>
  <div id="app">
    <div class="layui-container">
      <validation-observer v-slot="{ handleSubmit, reset }">
        <form
          class="layui-form layui-form-pane"
          @submit.prevent="handleSubmit(onSubmit)"
          @reset.prevent="reset"
        >
          <div class="layui-form-item">
            <validation-provider rules="required|email" v-slot="{ errors }">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="用户名"
                  v-model.trim="name"
                  class="layui-input"
                  placeholder="请输入"
                />
              </div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <validation-provider rules="required" v-slot="{ errors }">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-inline">
                <input
                  type="password"
                  name="密码"
                  v-model="pwd"
                  class="layui-input"
                  placeholder="请输入"
                />
              </div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <validation-provider rules="required" v-slot="{ errors }">
              <label class="layui-form-label">验证码</label>
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="验证码"
                  v-model="code"
                  class="layui-input"
                />
              </div>
              <div
                class="layui-form-mid svg"
                v-html="captcha"
                @click="getCaptcha"
              ></div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <button class="layui-btn" :class="{ 'layui-btn-disabled': invalid }">
            点击登录
          </button>
          <button class="layui-btn" type="reset">重置</button>
          <a href="javascript:void(0)" class="forget-pwd-link">忘记密码</a>
        </form>
      </validation-observer>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      captcha: '', // 验证码
      name: '',
      pwd: '',
      code: '',
      errorMsg: [],
      invalid: false
    }
  },
  mounted () {
    this.getCaptcha()
  },
  methods: {
    onSubmit () {
      console.log('onSubmit')
    },
    getCaptcha () {
      axios.get('http://localhost:3000/getCaptcha').then(res => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.captcha = res.data.data.svg
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  background-color: #f2f2f2;
}
.layui-container {
  background-color: #fff;
}
input {
  width: 190px;
}
.forget-pwd-link {
  margin-left: 10px;
  &:hover {
    color: #009688;
  }
}
.svg {
  position: relative;
  top: -15px;
}
</style>

ex2

 $refs

<template>
  <div id="app">
    <div class="layui-container">
      <!-- <validation-observer v-slot="{ handleSubmit, reset }"> -->
      <validation-observer ref="form">
        <!-- <form
          class="layui-form layui-form-pane"
          @submit.prevent="handleSubmit(onSubmit)"
          @reset.prevent="reset"
        > -->
        <form @submit.prevent="onSubmit">
          <div class="layui-form-item">
            <validation-provider rules="required|email" v-slot="{ errors }">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="用户名"
                  v-model.trim="name"
                  class="layui-input"
                  placeholder="请输入"
                />
              </div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <validation-provider rules="required" v-slot="{ errors }">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-inline">
                <input
                  type="password"
                  name="密码"
                  v-model="pwd"
                  class="layui-input"
                  placeholder="请输入"
                />
              </div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <validation-provider rules="required" v-slot="{ errors }">
              <label class="layui-form-label">验证码</label>
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="验证码"
                  v-model="code"
                  class="layui-input"
                />
              </div>
              <div
                class="layui-form-mid svg"
                v-html="captcha"
                @click="getCaptcha"
              ></div>
              <div class="error">{{ errors[0] }}</div>
            </validation-provider>
          </div>
          <button class="layui-btn" :class="{ 'layui-btn-disabled': invalid }">
            点击登录
          </button>
          <!-- <button class="layui-btn" type="reset">重置</button> -->
          <a href="javascript:void(0)" class="forget-pwd-link">忘记密码</a>
        </form>
      </validation-observer>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'app',
  data () {
    return {
      captcha: '', // 验证码
      name: '',
      pwd: '',
      code: '',
      errorMsg: [],
      invalid: false
    }
  },
  mounted () {
    this.getCaptcha()
  },
  methods: {
    onSubmit () {
      this.$refs.form.validate().then(valid => {
        if (!valid) {
          return
        }

        this.name = ''
        this.pwd = ''
        this.code = ''
        this.$nextTick(() => {
          this.$refs.form.reset()
        })
      })
    },
    getCaptcha () {
      axios.get('http://localhost:3000/getCaptcha').then(res => {
        if (res.status === 200) {
          if (res.data.code === 200) {
            this.captcha = res.data.data.svg
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
#app {
  background-color: #f2f2f2;
}
.layui-container {
  background-color: #fff;
}
input {
  width: 190px;
}
.forget-pwd-link {
  margin-left: 10px;
  &:hover {
    color: #009688;
  }
}
.svg {
  position: relative;
  top: -15px;
}
</style>