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
投稿
猜你喜欢
- MySQL有多种存储引擎:MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 前言接着上一篇的故事工厂模式继续,手机要出厂,显然光一个手机肯定是不行的,还需要包装盒、充电器等等东西。我们按照上一篇提到的工厂模式,去建立
- python简单游戏-反弹球,供大家参考,具体内容如下tkinter实现,直接贴上代码from tkinter import*import
- 之前给大家介绍过python高手之路python处理excel文件(方法汇总) Python操作Excel之xlsx文件&nbs
- 简介Simon Willison来自英国,是一名经验丰富的开发人员。曾工作于Yahoo,是Web开发框架Django的创始人之一,也是Ope
- 本文实例为大家分享了Python基于Socket实现简单聊天室,供大家参考,具体内容如下服务端#!/usr/bin/env python#
- 导言:在关系数据库里,我们处理的数据通常跨越了几个数据表。举例:当展示产品信息时我们很可能想列出每个产品相应的category以及供应商的名
- 用户权限管理主要有以下作用: 1. 可以限制用户访问哪些库、哪些表 2. 可以限制用户对哪些表执行SELECT、CREATE、DELETE、
- 引言这不是一个什么多深的技术问题,多么牛叉的编程能力。这跟一个人的开发能力也没有非常必然的直接关系,但是知道这些会对你的SQL编写,排忧及优
- 在使用PyTorch做实验时经常会用到生成随机数Tensor的方法,比如:torch.rand()torch.randn()torch.no
- 用来制作甘特图的专业工具也不少,常见的有:Microsoft Office Project、GanttProject、WARCHART XG
- 初识defaultdict之前在使用字典的时候, 用的比较随意, 只是简单的使用dict.然而这样在使用不存在的key的时候发生KeyErr
- 在中文网页中最常见的网页编码就是GB2312和UTF-8了,本文介绍了ASP实现GB2312编码转换为UTF-8编码的函数:Function
- 一、框架架构二、项目目录结构三、框架功能说明解决痛点:通过session会话方式,解决了登录之后cookie关联处理框架天然支持接口动态传参
- 启用Ad Hoc Distributed Queries:exec sp_configure 'show advanced opti
- 接触python已有一段时间了,下面针对python基础知识的使用做一完整梳理:1)避免‘\n'等特殊字符的两种方式:a)利用转义字
- 几个星期前,SQL Server 2016的最新CTP版本已经发布了:CTP 2.4(目前已经是CTP 3.0)。关于SQL Server
- 登录注册是几乎所有网站都需要去做的接口,而说到登录,自然也就涉及到验证以及用户登录状态保存,最近用DRF在做的一个关于网上商城的项目中,引入
- 也许还有朋友不太清楚DOMContentLoaded这个事件。简单的说,这个事件就是要在大多数情况下去替代window.onload事件,因
- 先给大家展示下效果图,大家感觉不错,请参考实现代码:实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class。由于微信小程