vue 表单验证按钮事件交由父组件触发

vue 表单验证按钮事件交由父组件触发，不直接再子组件上操作的方法

子组件：
//内容部分

<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"><FormItem label="Age" prop="age"><Input type="text" v-model="formCustom.age" number></Input></FormItem><FormItem><Button type="primary" @click="handleSubmit('formCustom')">Submit</Button><Button @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button></FormItem>
</Form>

子组件js部分


export default {data () {return {formCustom: {age: ''},ruleCustom: {age: [{  required: true, message: '年龄不为空', trigger: 'blur' }]}}},methods: {handleSubmit (name) {this.$refs[name].validate((valid) => {if (valid) {const form = this.formCustom// 在这将事件传递出去this.$emit('submit', form)} else {this.$Message.error('Fail!');}})},handleReset (name) {this.$refs[name].resetFields();}}
}

父组件：

 //子组件<modalContent @submit="handleSubmit"/>

父组件js部分

import modalContent from '子组件位置（这里没写）'
export default {components: { modalContent },data () {return {}},methods: {// 子组件的点击触发事件handleSubmit(form) {this.$Message.success('Success!');}}
}

遇到某些xiagn要将按钮写在父组件上，但又需要调用子组件做验证之类的时候可以借鉴一下，
验证请忽略，这里主要是按钮的事件
（笔记的格式太丑了，看不下去了，在这做一下笔记）

vue 表单验证按钮事件交由父组件触发相关推荐

Vue 表单验证插件的写作过程
前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. ...
vue 表单验证并提交
vue 表单验证并提交一.常用验证方式 1.data 中验证 data 数据: 2.行内验证 3.引入外部定义的规则二.表单提交时验证 1.表单的提交按钮 2.ethods 方法一.常用验证方式 ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
vue表单验证插件 vuerify
表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此. 当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在v ...
vue表单验证，不能通过验证
vue表单验证一直不能通过 1.model里的值一定要和 js里面data的名称(formValidate)对应 2.rules里面的值要和js里面设定的表单规则(ruleValidate)对应 3. ...
vue表单验证，多种校验规则
前言 vue 表单验证,具体的大家根据自身项目和框架来,本文以antd举例. 实现这里以antd 举例 <template><a-form-model ref="rule ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
Vue 表单验证、数据验证
graceUI js 模块 graceUI 官网 http://grace.hcoder.net 首页视频教程第一节可观看组件演示 (: 使用说明 1 将 graceChecker.js 部署到您的项 ...
antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证
一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功二.思路 ...

vue 表单验证按钮事件交由父组件触发

vue 表单验证按钮事件交由父组件触发相关推荐

最新文章

热门文章