对于elementUI中对话框,点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示。今天终于自己查资料解决了,分享给大家

1、首先在你的对话框 取消按钮 加一个click事件,例如:(callOf里面的ruleForm和ref一 一对应起来)

<div slot="footer" class="dialog-footer">
<el-button @click="callOf('ruleForm')">取 消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> </div>

2、点击取消按钮,关闭对话框,清除表单验证

callOf(formName){
  this.dialogFormVisible = false;
  this.$refs[formName].resetFields();
}

3、对话框右上角的close按钮(before-close:关闭前的回调,会暂停 Dialog 的关闭,function(done),done 用于关闭 Dialog。 location.reload:刷新整个页面)

closeDialog(done){
  this.$confirm('确认关闭?')
  .then(_ => {
  done();
location.reload();
})
.catch(_ => { });
}

这样就设置好了,不会出现 二次点击时,错误提示还遗留在对话框上。

参考网站:https://www.cnblogs.com/hezihao/p/7416820.html

element-ui中关闭对话框清空验证,清除form表单数据的更多相关文章

  1. springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据

    springboot框架中集成thymeleaf引擎,使用form表单提交数据,debug结果后台获取不到数据 表单html: <form class="form-horizontal ...

  2. vue + ElementUI 关闭对话框清空验证,清除form表单

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个cli ...

  3. input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件

    最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...

  4. JS的文本框验证以及form表单的提交阻止

    js: 1.只能输入数字 只能输入数字:<input type="text" onkeyup="javascript:ReNumber(this)" /& ...

  5. Jquery如何序列化form表单数据为JSON对象 C# ADO.NET中设置Like模糊查询的参数 从客户端出现小于等于公式符号引发检测到有潜在危险的Request.Form 值 jquery调用iframe里面的方法 Js根据Ip地址自动判断是哪个城市 【我们一起写框架】MVVM的WPF框架(三)—数据控件 设计模式之简单工厂模式(C#语言描述)

    jquery提供的serialize方法能够实现. $("#searchForm").serialize();但是,观察输出的信息,发现serialize()方法做的是将表单中的数 ...

  6. 一键清空Form表单数据

    今天在工作项目调试bug当中,遇到这样的需求:页面上的数据太多,一个一个清空太繁琐,所以就采用全部清空的写法: $(':input','#myform').not(':button, :submit, ...

  7. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

  8. easyui不提交window中的form表单数据

    <form id="ff" method="post">, <div id="win" class="easyu ...

  9. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

随机推荐

  1. incredibuild(分布式任务软件)脚本

    IncrediBuild 可以在Server段通过修改单个任务的进程上限来实现提升任务执行速度. IncredBuild本机版也可以用来进行本机实现多线程任务分发,这样可以充分利用多核资源. 提交分布 ...

  2. 配置 admin 页面

    创建 blog 的管理后台 首先是 blog 这个 App,其中定义了 3个 Model,分别是 Category.Post 和 Tag.先创建 admin 页面,其代码需要写到 blog/admin ...

  3. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

  4. web.config 配置无后缀文本的访问

    在 www.sslforfree.com 申请ssl免费证书,我参考了别人分享的方法,采用了文件验证的方式.可是按照步骤把文件放好后,一直访问不了,总是跳到了404. 确定文件路径和上传的文件都没问题 ...

  5. WebServer_参考

    参考:http://blog.csdn.net/cjsafty/article/details/9323425 这里顺便记录下几个页面      lajphttps://code.google.com ...

  6. vue3.x版本安装vue-cli建项目

    vue-cli版本在3以上 全局安装vue-cli npm install -g @vue/cli 建立项目工程,假设项目建在e:\vueProject\vue-cli3.0+目录下: 先进入此目录: ...

  7. 如何使用delphi将Clientdataset的Delta保存到数据库中

    [delphi] view plain copy //ATableName-表名, AKeyField-主键,多个主键用;隔开,如 ;pid;times; from:unit HlsImplBase; ...

  8. c++空类为什么占用1个字符

    在C++中空类会占一个字节,这是为了让对象的实例能够相互区别.具体来说,空类同样可以被实例化,并且每个实例在内存中都有独一无二的地址,因此,编译器会给空类隐含加上一个字节,这样空类实例化之后就会拥有独 ...

  9. hive配置元数据库mysql文件配置

    hive中conf/hive-site.xml文件配置(没有该文件则新建) <?xml version="1.0"?> <?xml-stylesheet type ...

  10. NDK学习笔记-JNI数据类型和属性方法的访问

    JNI实现了C/C++与Java的相互访问,那么这篇文章就从C/C++访问Java开始说起 native函数说明 每个native函数,都至少有两个参数(JNIEnv *和jclass或jobject ...