VeeValidate 的使用场景以及配置详解

创建vue项目:

vue init webpack veecd ./vee npm run dev # oryarn run dev

安装 VeeValidate

npm install vee-validate --save# oryarn add vee-validate --save

本文中使用的 VeeValidate 版本为 2.1.5

在 App.vue 中引入

import VeeValidate from 'vee-validate';Vue.use(VeeValidate);

例子

第一个测试例子

<template> <div class="test1"> <div>  <input  type="text"  name="nickname"  v-model="formData.nickname"  v-validate="'required|min:3|max:10'"  >  <p>{{errors.first('nickname')}}</p> </div> <div>  <button @click="handleSubmit">Submit</button> </div> </div></template><script> export default { name: "test1", data() {  return {  formData: {   nickname: '',   password: '',  }  } }, methods: {  handleSubmit() {  this.$validator.validate()   .then((valid) => {   if (true === valid) {    console.log('验证通过');   } else {    console.log(this.$validator.errors.all());   }   })  } } }</script><style scoped lang="css"> .test1 { width: 900px; margin: 0 auto; }</style>

更多配置请参考官网!

我们只是用些常用配置和常用的验证!

中文配置

全局配置

import VeeValidate, {Validator} from 'vee-validate';import zh_CN from 'vee-validate/dist/locale/zh_CN';Vue.use(VeeValidate, { dictionary: { zh_CN: zh_CN }});Validator.localize('zh_CN');

这样就可以使用中文提示了!

自定义错误提示

<template> <div class="test2"> <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'"> </div> <div>{{errors.first('nickname')}}</div> <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'"> </div> <div>{{errors.first('password')}}</div> <div>  <button @click="handleSubmit">Submit</button> </div> </div></template><script> const validate = { custom: {  nickname: {  required: () => '昵称不得为空', //写法1  min: "昵称不得小于3个字符", //写法2  max: () => '昵称不得大于10个字符'  },  password: {  required: () => '密码不得为空',  min: "密码不得小于5个字符",  max: () => '密码不得大于200个字符'  } }, }; export default { name: "test2", data() {  return {  formData: {   nickname: '',   password: '',  }  } }, methods: {  handleSubmit() {  this.$validator.validate()   .then((valid) => {   if (true === valid) {    console.log('验证通过');   } else {    console.log(this.$validator.errors.all());   }   })  } }, mounted() {  this.$validator.localize('zh_CN', validate); } }</script>