表单校验 一

最近使用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. 词频统计 in office

    ROSTCM6 1. http://www.writewords.org.uk/word_count.asp 2. http://darylkinsman.ca/tools/wordfreq.shtm ...

  2. 项目无法运行iPhone5模拟器

    公司没有iPhone5真机, 有人反馈iPhone5有bug, 只能用模拟器验证bug, 但是使用iPhone5项目编译不过,报错: 注释掉相关引用代码,去掉 库

  3. Django - ORM - 进阶

    一.多表操作 创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是 ...

  4. rbac - 界面、权限

    一.模板继承 知识点: users.html / roles.html 继承自 base.html 滑动时,固定 position: fixed;top:60px;bottom:0;left:0;wi ...

  5. 106 miles to Chicago---zoj2797（最短路问题，求概率，模板）

    题目链接:http://www.icpc.moe/onlinejudge/showProblem.do?problemId=1797 题意是有 n 个点 m 条边,从a到b的不被抓的概率是p,让求从点 ...

  6. Python开发【模块】：matplotlib 绘制折线图

    matplotlib 1.安装matplotlib ① linux系统安装 # 安装matplotlib模块 $ sudo apt-get install python3-matplotlib # 如 ...

  7. pathmunge

    pathmunge是linux系统redhat系列版本系统变量/etc/profile中的函数 判断当前系统的PATH中是否有该命令的目录,如果没有,则判断是要将该目录放于PATH之前还是之后 pat ...

  8. python 面向对象 __dict__

    打印 类或对象中的所有成员 类的构造函数属性 属于对象:类中的公有属性和方法等属于类 打印信息 class schoolMember(object): '''学校成员分类''' member = 0 ...

  9. python os模块 os.chmod

    os.chmod() 方法用于更改文件或目录的权限. os.chmod(path, mode) 参数 path -- 文件名路径或目录路径. flags -- 可用以下选项按位或操作生成, 目录的读权 ...

  10. Django中间件的5种自定义方法

    阅读目录(Content) Django中间件 自定义中间件 中间件(类)中5种方法 中间件应用场景 回到顶部(go to top) Django中间件 在http请求 到达视图函数之前   和视图函 ...