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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
php如何连接sql server
2015/10/16 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
python实现图书借阅系统
2019/02/20 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
尊师重教演讲稿
2014/09/04 职场文书
教育见习报告范文
2014/11/03 职场文书
教师自荐信范文
2015/03/06 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL