vee-validate vue 2.0自定义表单验证的实例
作者:Game_Liang 发布时间:2023-07-02 17:09:33
标签:vee-validate,vue,表单,验证
亲测可用
学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。
一、安装
您可以通过npm或通过CDN安装此插件。
1. NPM
npm install vee-validate --save
2. CDN
<script src="path/to/vue.js"></script>
<script src="path/to/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
</script>
或者你可以使用ES6导入它:
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
二、使用中文提示
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下,首先还是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn', cn);
三、修改默认的错误提示信息
// 修改默认错误提示
const dict = {
cn: {messages: {required: (name) => `${name}不能为空!`}} // name接受alias的值.
}
Validator.localize(dict);
demo中修改了required的错误提示信息,因为使用的中文(前面引入的),所以是cn。最后用localize方法加入到Validator中。
四、使用自定义规则
Validator.extend('mobile', {
getMessage: field => "请输入正确的手机号码",
validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,getMessage中是错误提示信息,validate是验证规则,返回一个布尔值或promise.
完整例子
<template>
<div class="">
<form @submit.prevent="applyCoupon" class="">
<label class="">手机号</label>
<p class="">
<input v-model="phone" name="phone" :class="" type="text"
placeholder="请输入手机号"><br>
<span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
</p>
<label class="">姓名</label>
<p class="">
<input v-model="name" name="name" :class="" type="text"
placeholder="请输入手机号"><br>
<span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
</p>
<p class="">
<button type="submit" class="" name="button">确定</button>
</p>
</form>
</div>
</template>
<script>
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn', cn);
const dict = {
cn: {messages: {required: (name) => `${name}不能为空!`}}
}
Validator.localize(dict);
export default {
name: 'coupon-example',
validator: null,
data: () => ({
phone: '',
name: '',
errors: null
}),
computed: {},
methods: {
applyCoupon() { // 提交执行函数
this.validator.validate('name', this.name).then((result) => this.discounted = result);
this.validator.validate('phone', this.phone).then((result) => this.discounted = result);
}
},
created() {
this.validator = new Validator({});
Validator.extend('mobile', {
getMessage: field => "请输入正确的手机号码",
validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
Validator.extend('name', {
getMessage: field => "请输入正确姓名",
validate: value => value == 'tom'
});
this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手机'});
// 使用attach以FieldOptions作为其第一个参数的方法添加验证规则。
this.$set(this, 'errors', this.validator.errors);
}
};
</script>
<style>
.error {
font-size: 12px;
color: #ff1c13;
}
</style>
来源:https://blog.csdn.net/qq_39791705/article/details/78922920
0
投稿
猜你喜欢
- 定义字典并直接输出,结果输出结果中文是乱码展示d={'name':'lily','age':
- 突然有个想法,不知道是不是首创:用"表情符号"做植入广告. 目前的表情符号 "黄色小圆脸"系列可以说
- Python 是一种流行的编程语言,也是数据科学社区中最受欢迎的语言。与其他流行编程语言相比,Python 的主要缺点是它的动态特性和多功能
- 今天做visual transformer研究的时候,发现了einops这么个神兵利器,决定大肆安利一波。先看链接:https://gith
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- 应用场景域名资产监控,通过输入一个主域名,找到该域名对应的ip地址所在的服务器的端口开闭情况。通过定期做这样的监控,有助于让自己知道自己的资
- 前言在Python中元组是一个相较于其他语言比较特别的一个内置序列类型。有些python入门教程把元组成为“不可变的列表”,这种说法是不完备
- 内容摘要:为什么要什么XML文件:其优势就是处理该XML数据的文档可以是静态文档,比如HTML文件通过Javascript、XMLDOM来解
- 假设有一个表,结构如下:mysql> CREATE TABLE `a` ( `id
- 下面就来介绍下SQL Server 2008中使用的端口有哪些:首先,最常用最常见的就是1433端口。这个是数据库引擎的端口,如果我们要远程
- 在官网下载源码包:https://www.php.net/downloads.php步骤:1、解压命令:tar -xjvf php.tar.
- 楔子上一篇文章我们探讨了 GIL 的原理,以及如何释放 GIL 实现并行,做法是将函数声明为 nogil,然后使用 with nogil 上
- Unet是一个最近比较火的网络结构。它的理论已经有很多大佬在讨论了。本文主要从实际操作的层面,讲解pytorch从头开始搭建UNet++的过
- 本文主要给大家介绍了关于python实现循环购物车功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:示例代码# -*- co
- Python中的闭包前几天又有人留言,关于其中一个闭包和re.sub的使用不太清楚。我在脚本之家搜索了下,发现没有写过闭包相关的东西,所以决
- 前几天项目在运行的时候数据库数据插入突然报:ORA-01653: unable to extend table HSDC.ADDRESS b
- 一、数据库的备份1、选择要备份的数据库“accountInfo”,点击鼠标右键 → 任务 → 备份2、在打开的“备份数据库 —account
- 代码如下:<% dim objconn,connstr Set objconn =&
- 前言:Event在python线程间同步是一种常用的方法,本博客以生产者线程和工作者线程为例说明Event在线程间进行10次同步的应用。im
- 1、打开文件得到文件句柄并赋值给一个变量2、通过句柄对文件进行操作3、关闭文件示例文件'你好呀'我是于超嗯再见文件操作基本流