转:http://www.cnblogs.com/gsgs/p/6753682.html

element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享。怎么使用vuex将方法共享出来,各个组件都能用呢?

如下是一个验证age的数据,

rules:{

  age:[{required:true,trigger:'blur',validator:checkAge}]

}

required:true  指提示必须要填,也就是input那个红色星星,必填的标志,对数据是不影响的。

trigger:‘blur’,当失去焦点就进行一次验证。

validator:checkAge  我这儿我定义了一个checkAge函数,写在data中return的前面。这个其实只是个传参函数

思路:当失去焦点,会使validator验证会调用一次checkAge函数。并且会给checkAge默认传参数,checkAge(rules,value,callback){},value是input框中的内容,callback是回调函数。这3个参数是关键,必须要传给vuex store中的验证函数。

这儿要提醒一点:store中传过来的共享方法,并不是实实在在的方法,不管是map或者dispatck出来的,都不是原始方法,也就是说,不能如下这么干:

methods:map['checkAge'],
mounted(){
  this.rules.age[0].validator=this.checkAge //这样出错,这个checkAge不是正常的方法,被包装过。如果是state数据是可以直接这样干的。
}

因此,写一个转换函数:

data(){
  let checkAge=(rules,value,callback)=>{ //转换函数,主要目的是传给store内方法的参数。
    this.$store.dispatch('checkAge',{rules,value,callback})//这儿的checkAge是写在store中的,vuex规定参数必须传对象。
  }
  return {
    rules:{
      age:[{required:true,trigger:'blur',validator:checkAge}]//主要格式是标准json。
    },
    msg:{
      age:''
    }
  }
}

剩下的只需要在store中的actions内写上验证方法就行了。

//store中写:
let actions = {
checkAge({ commit }, obj) {//这个obj就是需要的参数,这个blur事件经过validator包装后的参数。随后的就跟官网上的一样了,随意写。
if (!obj.value) {
obj.cb(new Error('年龄不能为空'))
} else if (typeof obj.value != 'number') {
obj.cb(new Error('年龄必须为数字'))
} else {
if (obj.value > 100) {
obj.cb(new Error("年龄要打破记录了"))
} else if (obj.value < 0) {
obj.cb(new Error('年龄小了点,无法接受'))
} else {
obj.cb()
}
}
commit('dd')
}
}
let mutations={
  dd(){}
}
export default new Vuex.Store({
  actions,
  mutations
})
 

【21】vuex 与element iu表单校验的更多相关文章

  1. element的表单校验自动定位到该位置

    遇到的项目问题是在每个折叠面板里边都有不同的表单,用element上的校验时,若有没填写的表单或不符合表单格式的要求,则自动展开该折叠面板,且页面定位到没校验成功的表单   this.$refs.fo ...

  2. js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)

    最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...

  3. vue+element表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分 ...

  4. js-动态表单校验-吐血总结最近遇到的变态表单校验2---element+原生

    上一部分总结了基础常用的js表单校验,包括原生以及框架,下面来总结这一个月涉及到的动态校验: 动态表单校验大致分为三种情况: 1. 首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里 ...

  5. Vue Element-ui表单校验规则,你掌握了哪些?

    1.前言   Element-ui表单校验规则,使得错误提示可以直接在form-item下面显示,无需弹出框,因此还是很好用的.   我在做了登录页面的表单校验后,一度以为我已经很了解表单的校验规则. ...

  6. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  7. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  8. AngularJS 1.2.x 学习笔记(表单校验篇)

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  9. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

随机推荐

  1. web前端-回调函数sort详解

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

  2. ZendFramework-2.4 源代码 - 关于MVC - Model层

    所谓的谓词Predicate // ------ 所谓的谓词 ------ // 条件 case.3 $where = new \Zend\Db\Sql\Where(); $expression = ...

  3. day25-python之继承组合

    1.上节回顾 class School: x=1 def __init__(self,name,addr,type): self.Name=name self.Addr=addr self.Type= ...

  4. Python装饰器使用规范案例详解

    由于函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数. >>> def now(): ... print('2015-3-25') ... >> ...

  5. selenium中webdriver跳转新页面后定位置新页面的两种方式

    刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...

  6. Dialogue between Jack and Rose【jack 和 Rose的对话】

    Dialogue between Jack and Rose Rose : It's getting quiet. 越来越安静了 Jack : It's gonna take a couple of ...

  7. Special Segments of Permutation - CodeForces - 1156E (笛卡尔树上的启发式合并)

    题意 给定一个全排列\(a\). 定义子区间\([l,r]\),当且仅当\(a_l + a_r = Max[l,r]\). 求\(a\)序列中子区间的个数. 题解 笛卡尔树上的启发式合并. \(200 ...

  8. 华东交通大学2018年ACM“双基”程序设计竞赛 K

    MIKU酱是个玩游戏氪金的人,游戏公司给她制定了新的规则,如果想从关卡i到关卡j,你需要交一些钱就可以了,但同时,MIKU酱的爸爸zjw很爱她,所以她可以每过一关就向她爸要一次钱,但她爸每次给他的钱是 ...

  9. 8、python中的集合

    集合是python中无序.可变的数据结构.集合与字典类似,集合中的元素必须是可哈希的(等同于字典中的键),也就是说集合中的元素是唯一.不可变的数据类型.这里前面说集合可变,后面又说集合中的元素不可变是 ...

  10. Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法

    1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...