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

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

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

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>

<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><input type="text" v-model="formData.re_password" data-vv-name="re_password"    v-validate="'required|confirm'"> </div> <div>{{errors.first('re_password')}}</div> <div><input type="text" v-model="formData.mobile" data-vv-name="mobile" v-validate="'required|mobile'"> </div> <div>{{errors.first('mobile')}}</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个字符'  },  re_password: {  required: () => '请再次输入密码!',  },  mobile: {  required: () => '请输入手机号码!',  } }, }; export default { name: "test3", data() {  return {  formData: {   nickname: '',   password: '',   re_password: '',   mobile: ''  }  } }, 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);  this.$validator.extend('mobile', {  getMessage: field => '手机号有误',  validate: value => {   return /^((13|14|15|17|18)[0-9]{1}/d{8})$/.test(value)  }  })  this.$validator.extend('confirm', {  getMessage: field => '两次密码输入不一致',  validate: value => {   return value === this.formData.password  }  }) } }</script>

this.$validator.errors.items[0].msg

<template> <div class="reg"> <div class="form_item">  <div class="input">  <input   type="text"   name="mobile"   data-vv-name="mobile"   v-model="mobile"   v-validate="'required|mobile'"   placeholder="手机号码"  >  </div>  <div class="err">{{errors.first('mobile')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   v-model="img_captcha"   name="img_captcha"   placeholder="图形验证码"   v-validate="'required'"  >  </div>  <div class="err">{{errors.first('img_captcha')}}</div> </div> <div class="form_item">  <div class="input send_sms">  <input   type="text"   v-validate="'required|length:6'"   v-model="sms_captcha"   name="sms_captcha"   placeholder="短信验证码"  >  <button class="send_sms_btn" @click="handleSendSms">获取验证码</button>  </div>  <div class="err">{{errors.first('sms_captcha')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="password"   v-validate="'required|min:8'"   v-model="password"   placeholder="登录密码"   ref="password"  >  </div>  <div class="err">{{errors.first('password')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="re_password"   v-validate="'required|confirmed:password'"   v-model="re_password"   placeholder="再次输入登录密码"  ></div>  <div class="err">{{errors.first('re_password')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="nickname"   v-validate="'required|min:3|max:10'"   v-model="nickname"   placeholder="请输入昵称"  ></div>  <div class="err">{{errors.first('nickname')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="id_card"   v-validate="'required|id_card'"   v-model="id_card"   placeholder="请输入身份证号码"  ></div>  <div class="err">{{errors.first('id_card')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="date"   name="birthday"   v-validate="'required|date_format:YYYY-MM-DD'"   v-model="birthday"   placeholder="请输入生日"  ></div>  <div class="err">{{errors.first('birthday')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="url"   v-validate="'required|url'"   v-model="url"   placeholder="请输入个人网址"  ></div>  <div class="err">{{errors.first('url')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="email"   v-validate="'required|email'"   v-model="email"   placeholder="请输入电子邮箱"  ></div>  <div class="err">{{errors.first('email')}}</div> </div> <div class="form_item">  <div class="input">  <input   type="text"   name="age"   v-validate="'required|between:18,60'"   v-model="age"   placeholder="请输入年龄"  ></div>  <div class="err">{{errors.first('age')}}</div> </div> <div class="form_item">  <button class="reg_btn" @click="handleSubmit">注册</button> </div> </div></template>

<style> .err { color: red; font-size: 12px; text-align: left; } .reg { width: 500px; margin: 0 auto; } .send_sms { position: relative; } .send_sms_btn { position: absolute; width: 100px; height: 30px; right: -11px; top: 2px; cursor: pointer; border: none; border-radius: 4px; background-color: #e4393c; outline: none; color: #fff; } .form_item { margin-bottom: 10px; width: 400px; } input { width: 400px; height: 30px; border: 1px solid #999; border-radius: 4px; outline: none; padding-left: 10px; } .reg_btn { width: 100px; height: 30px; border: none; border-radius: 4px; background-color: #e4393c; outline: none; cursor: pointer; color: #fff; }</style>

<script> import {messages} from '../validate/reg' export default { name: "reg", data() {  return {  url: '',  age: '',  email: '',  birthday: '',  id_card: '',  nickname: '',  mobile: '',  img_captcha: '',  sms_captcha: '',  password: '',  re_password: '',  } }, mounted() {  this.$validator.localize('zh_CN', messages);  this.$validator.extend('mobile', {  getMessage: field => '手机号有误',  validate: value => {   return /^((13|14|15|17|18)[0-9]{1}/d{8})$/.test(value)  }  });  this.$validator.extend('id_card', {  getMessage: field => '身份证号码格式有误',  validate: value => {   return /(^/d{15}$)|(^/d{18}$)|(^/d{17}(/d|X|x)$)/.test(value)  }  }); }, methods: {  handleSubmit() {  this.$validator.errors.clear();  this.$validator.validateAll({   mobile: this.mobile,   password: this.password,   sms_captcha: this.sms_captcha,   re_password: this.re_password,   url: this.url,   age: this.age,   email: this.email,   birthday: this.birthday,   id_card: this.id_card,   nickname: this.nickname,  }).then((valid) => {   console.log(valid);   if (true === valid) {   console.log('验证通过');   } else {   console.log(this.$validator.errors.all());   }  });  },  handleSendSms() {  this.$validator.errors.clear();  this.$validator.validateAll({   mobile: this.mobile,   img_captcha: this.img_captcha  }).then((valid) => {   console.log(valid);   if (true === valid) {   console.log('验证通过');   } else {   console.log(this.$validator.errors.all());   }  });  } } }</script>

export const messages = { custom: { mobile: {  required: () => '请输入手机号码!',  mobile: () => '手机号码有误', }, img_captcha: {  required: () => '请输入图形验证码!', }, sms_captcha: {  required: () => '请输短信验证码!',  length: () => '短信验证码为6位数字' }, password: {  required: () => '密码不得为空',  min: () => '密码不得小于8个字符', }, re_password: {  required: () => '请再次输入密码!',  confirmed: () => '两次密码输入不一致' }, nickname: {  required: () => '请输入昵称',  min: () => '昵称最小为3位字符',  max: (field, params) => {  return `昵称最大为${params[0]}位字符`;  } }, id_card: {  required: "身份证号码不得为空" }, birthday: {  required: "请选择出生日期",  date_format: "出生日期有误" }, url: {  required: () => "请输入个人网址",  url: () => "网址输入有误" }, email: {  required: () => "请输入电子邮箱",  email: () => "电子邮箱输入有误" }, age: {  required: () => "请输入年龄",  between: () => "年龄必须在18-60岁之间" } },};

export const messages = { custom: { nickname: {  required: () => "请输入年龄",  between: (fiield,params) => `年龄必须在${params[0]}-${params[1]}岁之间" } },};

validateAll(field Object) validateAll({mobile:this.moble});