VeeValidate 的使用场景以及配置详解
创建vue项目:
vue init webpack vee cd ./vee npm run dev # or yarn run dev
安装 VeeValidate
npm install vee-validate --save # or yarn 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>
自定义验证规则
<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
<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 代码(这个是随便写的 原生css大家不要吐槽哈)
<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>
js
<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>
外部引入的js (自定义提示内容)
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});
还可以使用 data-vv-scope 来指定 但是该方法并不适用一些场景;
显示错误信息的时候必须要指定scope的值 不然不会显示错误信息
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- springmvc中RequestMappingHandlerAdapter与HttpMessageConverter的装配讲解
- Android多国语言转换Excel及Excel转换为string详解
- pyqt5实现俄罗斯方块游戏
- springData使用QueryDsl的示例代码
- JavaScript常见继承模式实例小结
- Springmvc的运行流程图文详解
- Java异常处理中的各种细节汇总
- Spring整合Springmvc的相关介绍
- JavaScript惰性求值的一种实现方法示例
- JavaScript创建对象的四种常用模式实例分析
- python之线程通过信号pyqtSignal刷新ui的方法
- 详解Vue项目部署遇到的问题及解决方案
- Spring Boot对Future模式的支持详解
- 对python多线程中Lock()与RLock()锁详解
- Hadoop中namenode和secondarynamenode工作机制讲解
- VeeValidate 的使用场景以及配置详解
- 浅谈Python 多进程默认不能共享全局变量的问题
- Python设计模式之组合模式原理与用法实例分析
- 数据库sql语句优化
- Spring boot中使用ElasticSearch的方法详解
- JS函数节流和防抖之间的区分和实现详解
- python通过配置文件共享全局变量的实例
- SpringCloud实现SSO 单点登录的示例代码
- MySQL排序中使用CASE WHEN的方法示例
- Python设计模式之命令模式原理与用法实例分析