表单校验 一

最近使用elment-ui表单进行各种校验，心力交瘁，依旧不能很好地解决，先列出自己的归类，后期一个个攻破

  • 表单校验史

表单校验准则

  • 参考资源

  • 第一种
    • 显示明确的错误消息。
    • 放宽输入格式。
    • 指出错误发生的位置（特别是在大型表单中）。
  • 第二种
    • short
    • friendly
    • easy

正常录入数据进行校验

校验时的几种类型

  • 输入时进行校验，主要用到input,也可以是键盘事件，但目前而已，input是最好的

  • 输入完校验，主要利用 鼠标blur事件

  • 后端校验， 检验完后，在前端返显即可

测试表单校验插件系列 （针对vue）

表单校验流程

表单校验默认流程

  • vue中 v-model.trim 去除两侧空格
  • 正则校验(基本可以解决一切)

表单校验太多，我准备分批探讨。这算是开篇，后期会给予自己做的element-ui进行一系列说明。

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 表单校验 vee-validate

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

  5. vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined

    TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...

  6. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  7. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  8. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  9. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

随机推荐

  1. 配置oem

    [oracle@kaifai ~]$ export ORACLE_SID=dbking[oracle@kaifai ~]$ export ORACLE_SID=kaifai[oracle@kaifai ...

  2. es navi map+++++++nginx logs-parser

    http://www.cnblogs.com/ahaii/p/7410421.html [2017-12-17T00:01:03+08:00] ["GET /user/comm/login? ...

  3. Git学习-->关于Jenkins编译时候，如何获取Git分支的当前分支名？

    一.背景 因为代码都迁移到了Gitlab,所以Jenkins编译的时候我们都需要将之前的SVN信息换成现在的Git信息.最近编译一个Lib库的时候,因为团队规定上传Release版本的AAR到Mave ...

  4. python之WebSocket协议

    一.WebSocket理论部分 1.websocket是什么 Websocket是html5提出的一个协议规范,参考rfc6455. websocket约定了一个通信的规范,通过一个握手的机制,客户端 ...

  5. Openstack（六）RabbitMQ集群

    各组件通过消息发送与接收是实现组件之间的通信: 6.1安装RabbitMQ 6.1.1安装RabbitMQ # yum install rabbitmq-server –y # systemctl s ...

  6. PAT 1105 Spiral Matrix[模拟][螺旋矩阵][难]

    1105 Spiral Matrix(25 分) This time your job is to fill a sequence of N positive integers into a spir ...

  7. [C#]解决程序Vista/Win7下因UAC导致的读写错误

    在微软的操作系统中,vista和win7加入了UAC的功能,UAC(User Account Control,用户帐户控制)是微软为提高系统安全而在Windows Vista中引入的新技术,它要求用户 ...

  8. 028-B+树(一)

    B+ 树 这部分主要学习:什么是B+树? 了解了 B 树后再来了解下它的变形版:B+ 树,它比 B 树的查询性能更高. 一棵 B+ 树需要满足以下条件: 节点的子树数和关键字数相同(B 树是关键字数比 ...

  9. appium问题解决

    ppium 1.4.16 版本 测试安卓7.0 提示AppiumSettings.Unlock.AndroidInputManager 安装 修改 C:\Program Files (x86)\App ...

  10. python webdriver 测试框架-数据驱动xml驱动方式

    数据驱动xml驱动的方式 存数据的xml文件:TestData.xml: <?xml version="1.0" encoding="utf-8"?> ...