Vue中表单校验
1.安装校验插件vee-validate
npm install vee-validate --save
2.在main.js中引用插件
// 表单校验
import VeeValidate, { Validator } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN' Vue.use(VeeValidate)
Validator.localize('zh_CN', zh_CN);
3.基础使用
<div class="loginline">
<input type="text" placeholder="账号" v-model="username" name="username" v-validate="'required|min:2'" data-vv-as="账号" >
<span class="errormsg">{{ errors.first('username') }}</span>
</div>
Vue中表单校验的更多相关文章
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- vue表单校验(三)
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- vue 表单校验报错 "Error: please transfer a valid prop path to form item!"
vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...
- vue 表单校验 一
表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验史 表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误 ...
- Vue 表单校验 vee-validate
gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...
- 037——VUE中表单控件处理之表单修饰符:lazy/number/trim
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 036——VUE中表单控件处理之动态绑定文章的属性的处理方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 深入Java数据类型
Java的数据类型分为两大类,一类是基本数据类型,还有一类就是引用数据类型. 1.基本数据类型 Java一共有8种基本数据类型,分别是byte,short,int,long,float,double, ...
- Codeforces Round #449 (Div. 2) B. Chtholly's request【偶数位回文数】
B. Chtholly's request time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- perl learning
Perl 中文教程 http://cn.perlmaven.com/perl-tutorial learning perl in about 2 hours 30 minutes http://qnt ...
- Http头 Range、Content-Range(http断点续传原理)
HTTP头中一般断点下载时才用到Range和Content-Range实体头,Range用户请求头中,指定第一个字节的位置和最后一个字节的位置,如(Range:200-300)Content-Rang ...
- AIX 删除指定目录、指定后缀、指定天数以前的历史文件
find /home/oracle/admin/zhjport/udump/ -name "*.trc" -mtime +30 -exec rm {} \; 如果要自动执行可以加入 ...
- 一次lenovo a390t刷机体验
今天一朋友说自己的联想a390t手机有时候打着打着电话就没声音了,手机好像死机了一样,以前用着挺好的没什么毛病. 因为以前用刷机精灵刷过几个android手机,感觉挺简单的,只要找好对应的rom点击两 ...
- 实例化Spring容器的两种常用方式
//在类路径下寻找配置文件来实例化容器 ApplicationContext ctx = new ClassPathXmlApplicationContext(new String[]{"b ...
- vue install 注册组件
1.myPlugin.js文件 let MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue. ...
- iOS SDK具体解释之UIDevice(系统版本号,设备型号...)
原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 blog.csdn.net/column/details/huangwenchen ...
- 自定义带下划线文本的UIButton
转载自 http://mobile.51cto.com/hot-404798.htm,略有改动 UnderLineButton.h代码 @interface UnderLineButton : UIB ...