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

创建某视频剪辑软件项目：

vue init webpack veecd ./vee npm运行开发# oryarn运行开发安装VeeValidate

新公共管理安装vee-验证-保存# oryarn添加vee-验证-保存本文中使用的VeeValidate版本为2.1.5

在App.vue中引入

从" vee-validate "导入VeeValidatevue。使用(VeeValidate)；例子

第一个测试例子

模板div class='test1' div输入类型=' text ' name='昵称' v-model=' formdata。昵称“v-validate=”必需|最小值：3 |最大值：10 ' ' p { { errors }。first('昵称')} }/p/div按钮@点击=' handleSubmit '提交/按钮/div/div/模板脚本导出默认{ name: ' test1 '，data(){ return { formdata : }昵称3:“”，password : $ validator . validate().然后((有效)={ if (true===有效){ console.log('验证通过');} else { console.log(这$ validator。错误。all())；} }) } } }/scriptstyle作用域为lang=' CSS '。test1 {宽度： 900 pxmargin: 0 auto}/样式更多配置请参考官网！

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

中文配置

全局配置

从" vee-validate "导入VeeValidate，{ validate }；从" vee-validate/dist/locale/zh_CN "导入zh _ CNvue . use(veevaluate，{ dictionary : { zh _ CN : zh _ CN } })；验证器。本地化(' zh _ CN ')；这样就可以使用中文提示了！

自定义错误提示

template div class=' test2 ' divinput type=' text ' v-model=' form data。昵称' data-vv-name='昵称' v-validate=' '必选| min :10 ' '/div { {错误。first('昵称')} }/div divinput type=' text ' v-model=' form data。password ' data-vv-name=' password ' v-validate=' '必选| min:5 | max:200昵称不得为空', //写法一分钟： '昵称不得小于3个字符', //写法2 max: ()='昵称不得大于10个字符}，密码： {必需的d :()='密码不得为空，min: '密码不得小于5个字符，max: ()='密码不得大于200个字符' } }, };导出默认值{ name: 'test2 '，data(){ return { formdata : }昵称： ' '，password: ' '，} } }，方法： { handleSubmit(){ this .$validator.validate().然后((有效)={ if (true===有效){ console.log('验证通过');} else { console.log(这$ validator。错误。all())；} }) }),挂载(){这个.$validator.localize('zh_CN '，validate)；} }/脚本自定义验证规则

template div class=' test2 ' divinput type=' text ' v-model=' form data。昵称“data-vv-name=”昵称“v-validate=”必选| min :10 ' '/div { {错误。first('昵称')} }/div divinput type=' text ' v-model=' form data。password ' data-vv-name=' password ' v-validate=' '必选| min:5 | max:200昵称不得为空', //写法一分钟： '昵称不得小于3个字符', //写法2 max: ()='昵称不得大于10个字符}，密码： {必需的d :()='密码不得为空，min: '密码不得小于5个字符，max: ()='密码不得大于200个字符}，re _ password : {必需的：()='请再次输入密码！}，mobile: { required: ()='请输入手机号码!', } }, };导出默认值{ name: 'test3 '，data(){ return { formdata : }昵称： ' '，password: ' '，re_password: ' '，mobile: '' } }，方法： { handleSubmit(){ this .$validator.validate().然后((有效)={ if (true===有效){ console.log('验证通过');} else { console.log(这$ validator。错误。all())；} }) }),挂载(){这个.$validator.localize('zh_CN '，validate)；这个$validator.extend('mobile '，{ getMessage: field='手机号有误，validate:值={返回/^((13|14|15|17|18)[0-9]{1}\d{8})$/.测试(值)} })这个$validator.extend('confirm '，{ getMessage: field='两次密码输入不一致，validate:值={返回值===这个。formdata。密码} })} }/脚本显示第一个错误！

有时候我们需要在弹出层中提示用户所以要显示第一个错误

这个$validator.errors.items[0].味精例子发验证码和注册！

这个例子中发验证码是一个验证注册又是一个验证所以有点意义！

在发送验证码的时候需要验证手机号码和图形验证码注册的时候需要验证除图形验证码之外的数据

模板

模板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='错误“{ errors。first(' mobile ')}/div/div class=' form _ item ' div class=' input ' input type=' text ' v-model=' img _ captcha ' name=' img _ captcha ' placeholder='图形验证码v-validate='必需“/div div class=”错误“{ errors。第一个(' img _ captcha ')}/div/div class=' form _ item ' div class=' input send _ SMS '输入类型=' text ' v-validate=' '必需|长度：6 ' ' v-model=' SMS _ captcha ' name=' SMS _ captcha ' placeholder='短信验证码button class=' send _ SMS _ BTN ' @ click=' handleSendSms '获取验证码/button/div class='错误' { errors。第一个(' SMS _ captcha ')} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' password ' v-validate=' '必选| min :8 ' ' v-model=' password '占位符='登录密码ref=' password '/div class=' error ' { errors。第一个(' password ')}/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' re _ password ' v-validate=' '必选|已确认的：密码' ' v-model=' re _ password '占位符='再次输入登录密码/div div class='错误“{ errors。第一个(' re _ password ')} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name='昵称v-validate=' '必需|最小值：3 |最大值：10 ' ' v-model='昵称占位符='请输入昵称/div div class='错误“{ errors。' first('昵称)} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' id _ card ' v-validate=' '必选| id _ card ' ' v-model=' id _ card ' placeholder='请输入身份证号码/div div class='错误“{ errors。第一个(' id _ card ')} }/div/div class=' form _ item ' div class=' input ' input type=' date ' name='生日v-validate=' '必选| date _ format : yyyy-MM-DD ' ' v-model='生日'占位符='请输入生日/div div class='错误“{ errors。' first('生日)} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' URL ' v-validate=' '必选| URL ' ' v-model=' URL '占位符='请输入个人网址/div div class='错误“{ errors。第一个(' URL ')} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' email ' v-validate=' '必选| email ' ' v-model=' email '占位符='请输入电子邮箱/div div class='错误“{ errors。第一个(' email ')} }/div/div class=' form _ item ' div class=' input ' input type=' text ' name=' age ' v-validate=' '必选|介于：18，60'' v-model='age '占位符='请输入年龄/div div class='错误“{ errors。第一个(' age ')} }/div/div class=' form _ item '按钮class=' reg _ BTN ' @单击=' handleSubmit '注册/button /div /div/templatestyle代码（这个是随便写的原生钢性铸铁大家不要吐槽哈)

风格err { color : redfont-size : 12px；文本-左对齐：} .reg { width : 500 pxmargin : 0 auto }。send _ SMS {位置：相对；} .send _ SMS _ BTN {位置：绝对；宽度： 100像素；height : 30pxright :-11px；top: 2pxcursor:指针；border:无；边界半径： 4px背景-颜色： # e 4393 c；大纲：无；color: # fff}。form _ item { margin-bottom : 10px；宽度： 400像素；}输入{ width : 400 pxhire : 30pxborder : 1px固体# 999;边界半径： 4px大纲：无；左填充： 10px} .reg _ BTN { width : 100 pxhirte : 30 pxborder :无；边界半径： 4px背景-颜色： # e 4393 c；大纲：无；光标：指针；color: # fff}/stylejs

脚本从""导入{消息}./validate/reg ' export default { name : ' reg '，data() { return { url: ' '，age: ' '，email: ' '，生日： ' '，id_card: ' '，昵称： ' '，mobile: ' '，img_captcha: ' '，sms_captcha: ' '，password: ' '，}，mounted() { this .$validator.localize('zh_CN '，messages)；这个$validator.extend('mobile '，{ getMessage: field='手机号有误，validate:值={返回/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)} })；这个$validator.extend('id_card '，{ getMessage: field='身份证号码格式有误，validate:值={返回/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|x|x)$)/.test(value)} })；}，方法： { handleSubmit(){ this .$验证器。错误。clear()；这个$ validator。验证所有({ mobile : this。手机，密码：这个.密码，短信_验证码：这个。短信_验证码，re _ password :这个。re _ password，url: this.url，age: this.age，email: this.email，生日：这个。生日，id_card: this.id_card，昵称：这个。昵称，然后((有效)={ console.log(有效);if (true===有效){ console.log('验证通过');} else { console.log(这$ validator。错误。all())；} });}，handleSendSms() { this .$验证器。错误。clear()；这个$ validator。验证所有({ mobile : this。手机，img _验证码：这个。img _ captcha }).然后((有效)={ console.log(有效);if (true===有效){ console.log('验证通过');} else { console.log(这$ validator。错误。all())；} });} } }/脚本外部引入的js(自定义提示内容)

"导出const messages={ custom : { mobile : {必需的d :()="请输入手机号码！mobile: ()='手机号码有误，}，img _ captcha : {必需的d :()='请输入图形验证码!'，}，SMS _ captcha : {必需的：()='请输短信验证码!'，length: ()='短信验证码为6位数字}，密码： {必需的d :()='密码不得为空，min: ()='密码不得小于8个字符，}，re _ password : {必需的d :()='请再次输入密码！confirmed: ()='两次密码输入不一致},昵称： {必需的d :()='请输入昵称，min: ()='昵称最小为3位字符，max:(字段，参数)={ return `昵称最大为${params[0]}位字符`;} }，id _ card: { required: '身份证号码不得为空},生日： { required: '请选择出生日期，date_format: '出生日期有误}，url: { required: ()='请输入个人网址，url: ()='网址输入有误}，email: { required: ()='请输入电子邮箱，email: ()='电子邮箱输入有误}，age : {必需的d :()='请输入年龄，介于： ()='之间年龄必须在18-60岁之间' } },};扩展内容

自定义错误信息中显示配置验证规则中的参数

导出常量消息={ custom : {昵称： {必需的d :()='请输入年龄，介于：(字段，参数)='年龄必须在${params[0]}-${params[1]}岁之间' } },};规则里面第一个参数是字段名称第二个参数是验证规则后面的参数；

验证指定字段

validateAll(字段对象)验证所有({ mobile : this。moble })；还可以使用数据范围来指定但是该方法并不适用一些场景；

显示错误信息的时候必须要指定范围的值不然不会显示错误信息

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。