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 弹出菜单/窗口效果
Oct 30 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
js微信支付实现代码
Dec 22 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
vue打包时去掉所有的console.log
Apr 10 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
德生S2000电路分析
2021/03/02 无线电
如何对PHP程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
图书管理程序(三)
2006/10/09 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
php递归函数怎么用才有效
2018/02/24 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js单例模式的两种方案
2013/10/22 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
Javascript Objects详解
2014/09/04 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript中的console.dir()函数介绍
2014/12/29 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
爱祖国演讲稿
2014/05/04 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
美元符号 $
2022/02/17 杂记
MySQL派生表联表查询实战过程
2022/03/20 MySQL
如何在Python中妥善使用进度条详解
2022/04/05 Python