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')
配置
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>