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 相关文章推荐
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
详解jQuery事件
Jan 13 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
如何利用node转发请求详解
Sep 17 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
简单了解常用的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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php轻松实现文件上传功能
2016/03/03 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Django中的文件的上传的几种方式
2018/07/23 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python面试题小结附答案实例代码
2019/04/11 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
安全责任书范文
2014/03/12 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
答谢酒会主持词
2015/07/02 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript