創建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>