vee-validate的使用
官网地址:http://vee-validate.logaretm.com/
这是一个插件Vue.js可以验证输入字段,显示错误,在一个简单而强大的方法。
学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。
下面来简单总结一下使用方法:
一、安装
npm install vee-validate@next --save
后面加@next是为了安装vue2.0的版本
二、引入
使用的是vue-cli脚手架工具,需要在main.js中
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate);
三、简单的使用
这个时候其实已经可以使用了,先上demo
<div>
<label for="email">邮箱:</label>
<input v-validate ="'required|email'" type="text" id="email" name="myEmail">
</div>
<span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>
解释一下:v-validate后面的required和email是官方已经规定好的几种默认错误类型中的两个,这个可以阅读官方文档。
span中用到了errors的几个方法,这里的参数都是定义了验证规则的表单的name。列举几个errors的方法:
- first(‘field’)
field中(也就是刚刚说过的name表单)中的第一个错误
- collect(‘field’)
field中所有的错误
- has(‘field’)
field中是否有错误
- all()
当前表单中的所有错误
- any()
当前表单中是否有错误
- count()
当前表单中的错误数量
- clear()
清除当前表单中的所有错误
四、使用中文错误提示
没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下
首先还是在main.js中引入
import zh_CN from 'vee-validate/dist/locale/zh_CN'
import { Validator } from 'vee-validate';
紧接着再加一句
Validator.addLocale(zh_CN);
最后需要把第一步的Vue.use(VeeValidate)改为
Vue.use(VeeValidate, {
locale: 'zh_CN',
});
现在错误提示已经是中文了
五、配置组件
上一点中的配置中文其实已经是对组件的配置了,再说一说其他的配置。
//配置
const config = {
errorBagName: 'errors', // change if property conflicts.
fieldsBagName: 'fields',
delay: ,
locale: 'zh_CN',
strict: true,
enableAutoClasses: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config);
delay是指对错误提示的延迟时间;locale就是上一点中对中文的配置,只是这里统一写到了config中;strict=true代表没有设置规则的表单不进行校验,events默认是input|blur,就是在用户输入和表单失去焦点时都进行校验,这里我改成了blur,即只有失去焦点时才开始验证。
五、修改默认的错误提示信息
//修改默认错误提示
const dictionary = {
zh_CN: {
messages: {
email: () => '邮箱格式不正确哦'
}
}
};
Validator.updateDictionary(dictionary);
demo中修改了email的错误提示信息,因为使用的中文(前面引入的),所以是zh_CN。最后用updateDictionary方法加入到Validator中。
六、自定义规则
Validator.extend('qq', {
messages: {
zh_CN:field => 'qq号码输入不正确'
},
validate: value => {
return /^[-][-]{,}$/.test(value);
}
});
extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,messages中是错误提示信息,validate是验证规则,返回一个布尔值或promise.
main.js引入
import validate, { config } from './public/js/vee-validate'; //表单验证插件配置
Vue.use(validate, config);
import validate, {Validator} from 'vee-validate';
const messagesCn = {
after: (field, [target]) => ` ${field}必须在${target}之后`,
alpha_dash: (field) => ` ${field}能够包含字母数字字符,包括破折号、下划线`,
alpha_num: (field) => `${field} 只能包含字母数字字符.`,
alpha_spaces: (field) => ` ${field} 只能包含字母字符,包括空格.`,
alpha: (field) => ` ${field} 只能包含字母字符.`,
before: (field, [target]) => ` ${field} 必须在${target} 之前.`,
between: (field, [min, max]) => ` ${field} 必须在${min}~${max}之间.`,
confirmed: (field, [confirmedField]) => ` ${field} 不能和${confirmedField}匹配.`,
date_between: (field, [min, max]) => ` ${field}必须在${min}和${max}之间.`,
date_format: (field, [format]) => ` ${field}必须在在${format}格式中.`,
decimal: (field, [decimals] = ['*']) => ` ${field} 必须是数字的而且最多包含${decimals === '*' ? '' : decimals}位小数.`,
digits: (field, [length]) => ` ${field} 必须是${length}位数字`,
dimensions: (field, [width, height]) => ` ${field}必须是 ${width} 像素到 ${height} 像素.`,
email: (field) => ` ${field} 必须是有效的邮箱.`,
ext: (field) => ` ${field} 必须是有效的文件.`,
image: (field) => ` ${field} 必须是图片.`,
in: (field) => ` ${field} 必须是一个有效值.`,
ip: (field) => ` ${field} 必须是一个有效的地址.`,
max: (field, [length]) => ` ${field} 不能大于${length}个字.`,
mimes: (field) => ` ${field} 必须是有效的文件类型.`,
min: (field, [length]) => ` ${field} 不能少于${length}个字.`,
not_in: (field) => ` ${field}必须是一个有效值.`,
numeric: (field) => ` ${field}只能包含数字.`,
regex: (field) => ` ${field} 格式无效.`,
required: (field) => `${field}不能为空.`,
size: (field, [size]) => ` ${field} 必须小于 ${size} KB.`,
url: (field) => ` ${field}不是有效的url.`,
phone: (field) => ` ${field} 格式不正确.`,
msgCode: (field) => ` ${field} 格式不正确.`,
nickname: (field) => ` ${field} 只能包含字母、数字或中文.`,
minChar: (field, [length]) => ` ${field}不能小于${length}个字符.`,
maxChar: (field, [length]) => ` ${field}不能大于${length}个字符.`
}
//手机号码
Validator.extend('phone', {
getMessage: field => field + ' 格式不正确',
validate: value => !!/^((([-]{})|([-]{})|([-]{}))+\d{})$/.test(value)
});
//6位手机短信验证码
Validator.extend('msgCode', {
getMessage: field => field + ' 格式不正确',
validate: value => !!/^[a-zA-Z0-]{}$/.test(value)
});
//昵称
Validator.extend('nickname', {
getMessage: field => field + ' 只能包含字母、数字或中文',
validate: value => !!/^[a-zA-Z0-\u4e00-\u9fa5]+$/.test(value)
});
//最小字符
Validator.extend('minChar', {
getMessage:(field,params) => {
return field+ '不能小于'+params[]+'个字符.'
},
validate: (value,params) => {
return !(value.replace(/[^\x00-\xff]/g, 'xx').length<parseInt(params[]))
}
})
// 最大字符
Validator.extend('maxChar', {
getMessage:(field,params) => {
return field+ '不能大于'+params[]+'个字符.'
},
validate: (value,params) => {
return !(value.replace(/[^\x00-\xff]/g, 'xx').length>parseInt(params[]))
}
})
export const config = {
errorBagName: 'errors', // change if property conflicts
// fieldsBagName: 'fields',
fieldsBagName: 'fieldsBag',
locale: 'zh_CN',
dictionary: {
zh_CN: {
messages: messagesCn
}
}
};
export default validate
vee-validate的使用的更多相关文章
- Vular开发手记#1:设计并实现一个拼插式应用程序框架
可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...
- Leetcode 笔记 98 - Validate Binary Search Tree
题目链接:Validate Binary Search Tree | LeetCode OJ Given a binary tree, determine if it is a valid binar ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jq.validate隐藏元素忽略验证
jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...
- jq.validate 自定义验证两个日期
jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- validate表单验证插件
1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
随机推荐
- HTML(四)HTML常用标签(a,img)
a元素 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用 ...
- EffectiveC++ 第3章 资源管理
我根据自己的理解,对原文的精华部分进行了提炼,并在一些难以理解的地方加上了自己的"可能比较准确"的「翻译」. Chapter 3 资源管理 条款13: 以对象管理资源 有时即使你顺 ...
- ES6走一波 数组的扩展
Array flat 数组实例的扁平化方法(浏览器支持不佳) 建议使用 lodash的 flatten
- 第八节,Opencv的基本使用------存取图像、视频功能、简单信息标注工具
1.存取图像 import cv2 img=cv2.imread('test.jpg') cv2.imwrite('test1.jpg',img) 2.图像的仿射变换 图像的仿射变换涉及图像的形状位置 ...
- python开发遇到的坑(2)mongodb安装路径权限问题
个人比较懒,Mac 电脑直接使用命令行安装,brew install mongodb,但是遇到两个问题,其一: Error: The following directories are not wri ...
- shim和polyfill
shim是将新的api引入旧的环境 polyfill是一段代码或插件 https://www.aliyun.com/jiaocheng/773254.html 理解得不够透彻...
- HBuilder只提示html 不提示js
1. 右键行号,点击语法验证器设置 点开Javascript语法验证器 然后修复你js代码中的不规范代码,就会有提示了.
- python第九天(9-34)
一:队列的三种模式 先进先出(FIFO) class queue.Queue(maxsize) 后进先出(LIFO) class queue.LifoQueue(maxsize) 优先级顺序(优先级低 ...
- docker 搭建以太坊私有链搭建
最近区块链,火得不行,身边也有朋友准备玩这个,说是搭了一个星期,没有把环境搭建起来,叫我帮忙看看环境怎么搭建 于是我找到了官方的地址 https://github.com/ethereum/go-et ...
- js分析 邮箱地址加密 [email protected]
0.参考 https://segmentfault.com/q/1010000000117476 javascript里function之前加上感叹号 ' ! ' 会怎么样? // 这么写会报错,因为 ...