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中表单校验的更多相关文章

  1. vue 表单校验(二)

    vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...

  2. vue表单校验(三)

    vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...

  3. vue 表单校验报错 "Error: please transfer a valid prop path to form item!"

    vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...

  4. vue 表单校验 一

    表单校验 一 最近使用elment-ui表单进行各种校验,心力交瘁,依旧不能很好地解决,先列出自己的归类,后期一个个攻破 表单校验史 表单校验准则 参考资源 1 2 3 4 5 第一种 显示明确的错误 ...

  5. Vue 表单校验 vee-validate

    gitHub 地址:https://github.com/baianat/vee-validate 官网API 地址:https://baianat.github.io/vee-validate/ap ...

  6. 037——VUE中表单控件处理之表单修饰符:lazy/number/trim

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 036——VUE中表单控件处理之动态绑定文章的属性的处理方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 深入Java数据类型

    Java的数据类型分为两大类,一类是基本数据类型,还有一类就是引用数据类型. 1.基本数据类型 Java一共有8种基本数据类型,分别是byte,short,int,long,float,double, ...

  2. 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 ...

  3. perl learning

    Perl 中文教程 http://cn.perlmaven.com/perl-tutorial learning perl in about 2 hours 30 minutes http://qnt ...

  4. Http头 Range、Content-Range(http断点续传原理)

    HTTP头中一般断点下载时才用到Range和Content-Range实体头,Range用户请求头中,指定第一个字节的位置和最后一个字节的位置,如(Range:200-300)Content-Rang ...

  5. AIX 删除指定目录、指定后缀、指定天数以前的历史文件

    find /home/oracle/admin/zhjport/udump/ -name "*.trc" -mtime +30 -exec rm {} \; 如果要自动执行可以加入 ...

  6. 一次lenovo a390t刷机体验

    今天一朋友说自己的联想a390t手机有时候打着打着电话就没声音了,手机好像死机了一样,以前用着挺好的没什么毛病. 因为以前用刷机精灵刷过几个android手机,感觉挺简单的,只要找好对应的rom点击两 ...

  7. 实例化Spring容器的两种常用方式

    //在类路径下寻找配置文件来实例化容器 ApplicationContext ctx = new ClassPathXmlApplicationContext(new String[]{"b ...

  8. vue install 注册组件

    1.myPlugin.js文件 let MyPlugin = {}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue. ...

  9. iOS SDK具体解释之UIDevice(系统版本号,设备型号...)

    原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 blog.csdn.net/column/details/huangwenchen ...

  10. 自定义带下划线文本的UIButton

    转载自 http://mobile.51cto.com/hot-404798.htm,略有改动 UnderLineButton.h代码 @interface UnderLineButton : UIB ...