转: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. maven手动导入jar包到本地仓库

    一.cmd进入maven的bin目录下(我的目录是E:\cloud_cms\apache-maven-3.5.4\bin) cd E:\cloud_cms\apache-maven-3.5.4\bin ...

  2. <转载>一般筛法和快速线性筛法求素数

    素数总是一个比较常涉及到的内容,掌握求素数的方法是一项基本功. 基本原则就是题目如果只需要判断少量数字是否为素数,直接枚举因子2 ..N^(0.5) ,看看能否整除N. 如果需要判断的次数较多,则先用 ...

  3. phpstorm —— Xdebug 的配置和使用

    给phpstorm 配置Xdebug(Xdebug 是 PHP 的一个扩展, 用于帮助调试和开发.它包含一个与 ide 一起使用的单步调试器.它升级了 PHP 的 var_dump () 功能) 这篇 ...

  4. nginx负载均衡集群(二)

    nginx负载均衡配置实战 一.配置基于域名虚拟主机的web节点 web02和web01做同样的操作,nginx配置文件如下: [root@web01 conf]# cat nginx.conf wo ...

  5. 【JAVA】JVM常用工具

    JDK内置工具使用 jps(Java Virtual Machine Process Status Tool)    查看所有的jvm进程,包括进程ID,进程启动的路径等等. jstack(Java ...

  6. php订单号的生成

    来自ECSHOP订单号生成函数:/includes/lib_order.php文件中的get_order_sn() /** * 得到新订单号 * @return string */ function ...

  7. Java课堂作业详解

    今天的Java课堂留下了一个作业:使用Eclipse编写一个程序,使输入的两个数进行加和,并且输出他们的和.对于这个题目,我们首先可以把它分解成为三个不同的小步骤 第一步就是输入这两个数,因为我们无需 ...

  8. [译]The Python Tutorial#10. Brief Tour of the Standard Library

    [译]The Python Tutorial#Brief Tour of the Standard Library 10.1 Operating System Interface os模块为与操作系统 ...

  9. keil swd设置下载stm32f103c8t6.

    1.debug选项,选择jlink,2.utilities选择jlink3.加载flash算法.4.选择swd模式,其他基本上默认,这样就可以下载了对rom和ram设置需要说明一下:1,IROM1,前 ...

  10. hive实现根据用户分组,按用户记录求上下两条记录的时间差

    在mysql,数据如下:#查询某一用户该日抽奖时间 select draw_time from user_draw_log where user_id = 1 and draw_date='2016- ...