vue动态绑定组件子父组件多表单验证功能的实现代码


Posted in Javascript onMay 14, 2018

vue动态绑定组件子父组件多表单验证功能的实现代码

前端项目中经常会下拉或者选项卡,如果通过if,else或者switch去判断加载的话会产生大量冗余代码和变量定义,而且都写在一起后人很难维护。

Vue核心在于组件,如果有内容通过选项卡或者下拉框切换用动态加载子组件最好不过。

vue动态绑定组件子父组件多表单验证功能的实现代码

如图: selects文件夹中,index只负责公共数据(当然公共数据也可以写在其他文件,只留一个入口文件),而comp文件夹中的几个组件则通过动态加载。

动态加载子组件:component

// 给下拉框绑定下拉列表的索引
<el-select v-model="value" placeholder="请选择" style="float:left" @change="selectNum(value)">
     <el-option
         v-for="item in options"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
</el-select>

引入组件后放到一个数组内,通过控制对应的索引达到加载组件的目的

vue动态绑定组件子父组件多表单验证功能的实现代码

// 加载组件:每次下拉框监听则给changValue新赋值,如果下拉options的value从0开始则绑定组件时不用-1
<component :is="componentName[changValue - 1]" ref="subjectChild" @isSubmit="getSubmit"></component>

子父组件表单一起验证:

按钮放在父组件内:

子组件:自定义验证规则

data(){
  const num = (rule, value, callback) => {
    let num = /^\d+$/
    if(!value){
      return callback(new Error('数量不能为空'))
    }else if(!num.test(value)){
      return callback(new Error('数量必须为数字'))
    }else{
      callback()
    }
  }
  const price = (rule, value, callback) => {
    let num2 = /^\d+$/
    if(!value){
      return callback(new Error('单价不能为空'))
    }else if(!num2.test(value)){
      return callback(new Error('单价必须为数字'))
    }else{
      callback()
    }
  }
  return{
    // 验证
    apple:{
      num: '',
      price: '',
    },
    reg:{
      num: [
        { validator: num, trigger: 'blur' }
      ],
      price: [
        { validator: price, trigger: 'blur' }
      ]
    }
  }
// 验证
  submitForm(){
    this.$refs.apple.validate((valid) => {
      if(valid){
        this.$emit('isSubmit',["subject",true])
      }else{
        this.$emit('isSubmit',["subject",false])
        return false
      }
    })
  }

父组件:

// 获取子组件状态
  getSubmit(type){
    this.isRule = type[1]
  },
// 公共数据验证
  submitForm2(){
    // 如果选中了子组件
    if(this.changValue){
      this.$refs.subjectChild.submitForm()
    }
    let _this = this
    let p1 = new Promise((resolve, reject) => {
      _this.$refs.ruleForm.validate((valid) => {
        if(valid){
          resolve()
        }
      })
    })
    if(_this.isRule){
      Promise.all([p1]).then(() => {
        console.log('正确')
      })
      .catch(() => {
        console.log('错误')
      })
    }else{
      console.log('错误')
    }
  },

总结

以上所述是小编给大家介绍的vue动态绑定组件子父组件多表单验证功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
js null undefined 空区别说明
Jun 13 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 #jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 #jQuery
vue引入js数字小键盘的实现代码
May 14 #Javascript
vue移动端路由切换实例分析
May 14 #Javascript
对node.js中render和send的用法详解
May 14 #Javascript
利用vscode调试编译后的js代码详解
May 14 #Javascript
vue的toast弹窗组件实例详解
May 14 #Javascript
You might like
PHP form 表单传参明细研究
2009/07/17 PHP
详解PHP中的PDO类
2015/07/06 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python global关键字的用法详解
2019/09/05 Python
python函数不定长参数使用方法解析
2019/12/14 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
搞笑车尾标语
2014/06/23 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
安全生产培训心得体会
2016/01/18 职场文书
MySQL基础(二)
2021/04/05 MySQL
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Python 如何实现文件自动去重
2021/06/02 Python