表单校验 一

最近使用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. 知乎live 我的读书经验 总结

    https://www.zhihu.com/lives/757587093366009856/messages 碎片化阅读没有意义, 捡硬币捡成富翁 kindle不能全文检索   短篇文章的阅读是否有 ...

  2. python操作redis详解

    https://www.cnblogs.com/koka24/p/5841826.html

  3. New Reform---cf659E（dfs找环）

    题目链接:http://codeforces.com/problemset/problem/659/E 给你n个点,m条双向边,然后让你把这些边变成有向边,使得最后的图中入度为0的点的个数最少,求最少 ...

  4. python控制台输出颜色

    python_控制台输出带颜色的文字方法在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中.而一般的应用服务器,第三方库,甚至服务器的一些通告也 ...

  5. mysql 数据操作 单表查询 having 过滤 练习

    1. 查询各岗位内包含的员工个数小于2的岗位名.岗位内包含员工名字.个数 mysql> select post,group_concat(name),count(id) from employe ...

  6. SQL Server 复制（Replication） ——事务复制搭建

    本文演示如何搭建最基本的事务复制. 环境准备: 虚拟机2台: 服务器名分别为RepA和RepB,RepA为发布服务器,RepB为订阅服务器.均安装WindowsServer 2008R2英文版(在外企 ...

  7. WebDriver API 实例详解（三）

    二十一.模拟鼠标右键事件 被测试网页的网址: http://www.sogou.com Java语言版本的API实例代码: package test; import org.testng.annota ...

  8. 右值引用与转移语义（C++11)

    参考资料: http://www.cnblogs.com/lebronjames/p/3614773.html 左值和右值定义: C++( 包括 C) 中所有的表达式和变量要么是左值,要么是右值.通俗 ...

  9. chrome 调试 ios的 H5 页面

    原文地址http://www.cnblogs.com/kelsen/p/6402477.html 本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safar ...

  10. 6.3 Controllers -- Managing Dependencies Between Controllers

    1. 有时候,特别是当嵌套资源的时候,我们需要两个controllers之间的某种连接.让我们拿这个router当做例子: app/router.js var Router = Ember.Route ...