Vue element-ui父组件控制子组件的表单校验操作


Posted in Javascript onJuly 17, 2020

方法一:

父组件代码:

<template>
<div>
	<child-form  ref="childRules" :addForm="addForm" >  </child-form>
	
	 <el-button @click="saveForm()" size='medium'>保 存</el-button>
	 
</div>
</template>
<script>
	import childForm from './childForm'
	export default {
		data(){
			return {
					addForm: { 
				   name:"",
			     desc: ""
			    },
				}
   		},
   		//组件引用
		  components: { 
		   childForm 
		  },
		  methods:{
				 //保存校验
			   saveForm() { 
			    let flag = this.$refs['childRules'].validateForm(); 
			    if(flag){
			     console.log(this.addForm);
			
			
			    }else{
			      this.$message.error('保全信息不完整,请继续填写完整');
			    } 
			   },
			}
	}
</script>
<style></style>

//子组件代码

<!-- -->
<template>
 <div class="form-content">
  <el-form :model="addForm" :inline="true"  :rules="formRules" ref="ruleForm"
   size='mini' label-width="120px" class="form-mini">
   <el-form-item label="名字" prop='name'>
   		<el-input v-model="addForm.name" ></el-input>
   </el-form-item> 
  </el-form>
 </div>
</template>

<script> 
 export default {
  name: '', 
  props: {
   addForm: { 
    type: Object,
    default: function () {
     return { 
     } 
    }
   } 
  },
  data() {
   //这里存放数据
   return { 
    formRules: {
     name: [{
      required: true,
      message: '请输入',
      trigger: 'blur'
     }] 
    }, 
   };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //过滤器
  filters: {},
  //方法集合
  methods: { 
   //子组件校验,传递到父组件
   validateForm () {
    let flag = null
    this.$refs['ruleForm'].validate(valid => {
     if (valid) {
      flag = true
     } else {
      flag = false
     }
    })
    return flag
   }
  } 
 }

</script>
<style lang='less'> 
</style>

补充知识:vue element-ui表单验证无效解决方案

在写页面的时候用到的element-ui库中的表单验证

出现如下问题

Vue element-ui父组件控制子组件的表单校验操作

表单验证效果已有 但验证功能不正确。

检查与对照官网 发现有二点如下所示

Vue element-ui父组件控制子组件的表单校验操作

第一,在form上需要绑定对象,绑定规则

第二,在form-item上的prop需要与输入框中的绑定对象命名相同。

改完之后,即可对输入内容进行验证

验证内容格式 可参考element-ui官网

以上这篇Vue element-ui父组件控制子组件的表单校验操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
简单了解常用的JavaScript 库
Jul 16 #Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 #jQuery
浅谈js中的attributes和Attribute的用法与区别
Jul 16 #Javascript
JS自定义右键菜单实现代码解析
Jul 16 #Javascript
JS如何在不同平台实现多语言方式
Jul 16 #Javascript
vue使用axios实现excel文件下载的功能
Jul 16 #Javascript
vue实现自定义多选按钮
Jul 16 #Javascript
You might like
php输出表格的实现代码(修正版)
2010/12/29 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
javascript json2 使用方法
2010/03/16 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
python实现flappy bird游戏
2018/12/24 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
python 常见的反爬虫策略
2020/09/27 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
运动会通讯稿100字
2015/07/20 职场文书
初中政治教学工作总结
2015/08/13 职场文书