element-ui和vue表单(对话框)验证提示语(残留)清除操作


Posted in Javascript onSeptember 11, 2020

问题是这样的:

如果一个页面有多个按钮打开相同的element-ui的Dialog对话框,那么如果第一个点击"顺序"按钮出现红色验证提示语后, 再点击“取消”,或者点击页面空白处此对话框消失,而后再点击同一个“顺序”按钮亦或别的“顺序”按钮, 那么此红色提示依然存在,显然是无法忍受的,那么怎么去除呢,

element-ui和vue表单(对话框)验证提示语(残留)清除操作

这里也用到一个vue的一个语法watch,从字面意思上理解就是起到监控的作用,监控这个diaLog对话框的打开和关闭。

在 “ 代码一 ” vue中的data前面加上watch来监控对话框,对于function中的val,oldVla两个参数不必过多纠结,只要任意一个变量都可以,只是起到打开和关闭的暂存而已(个人理解)

在 “ 代码二 ” element-ui中定义一个 ref="form" 起到参照的作用(reference),watch中的form与此相对应,resetFields取自element-ui官网上的Form表单里的方法名, 看 “ 图二 ”官网截图

代码一、

let result = Vue.extend({
   name: 'recommend-list',
   template: template,
   watch: {
    dialogSequenceVisible: function (val,oldVla) {
     this.$refs["form"].resetFields();
    }
   },
   data() {
    let validateSequence = (rule, value, callback) => {
     let val = this.trim(value);
     if (val == '') {
      callback(new Error('顺序值不允许为空'));
     } else if (value > 9223372036854775807) {
      callback(new Error('顺序值不能超过9223372036854775807'));
     } else if (!this.isNumber(val)) {
      callback(new Error('必须输入正整数'));

代码二、

<el-dialog title="调整顺序" :visible.sync="dialogSequenceVisible" style="width:80%" @close='closeDialog'>
 
   <el-form label-width="200px" :model="form" style="margin:0 auto;" :rules="rules" ref="form">
 
    <el-form-item label="请输入调整的顺序值:"
        prop="sequence">
     <el-input v-model="form.sequence" style="width:200px" auto-complete="off"></el-input>
    </el-form-item>
 
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogSequenceVisible = false">取 消</el-button>
    <el-button type="primary" @click="position()">确 定</el-button>
   </div>
  </el-dialog>

图二、

element-ui和vue表单(对话框)验证提示语(残留)清除操作

但是,这样会页面调试模式会报错 “ Cannot read property 'resetFields' of undefined ” 错误, 应该是第一次弹出dialog对话框的时候没有弄到DOM里, 需要修改vue中的watch代码, 做个限定. 这样不但可以清除提示语, 还可以清空输入框里内容残留, 如下:

let result = Vue.extend({
   name: 'recommend-list',
   template: template,
   watch: {
    dialogSequenceVisible: function (val,oldVla) {
     if (this.$refs['form'] != undefined) {
      this.$refs["form"].resetFields();
     }
    }
   },

补充知识:elementUI vue 编辑中的input的验证残留清除

当使用编辑的时候, 假如上次的验证没通过, 报红了, 下次再点击编辑的时候还会报红,因此要清除验证残留, 方式有两种:

this.$refs["from"].resetFields(); //移除校验结果并重置字段值

this.$refs["from"].clearValidate(); //移除校验结果

以上这篇element-ui和vue表单(对话框)验证提示语(残留)清除操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 定义
Jun 10 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
vue-router单页面路由
Jun 17 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
vue实现井字棋游戏
Sep 29 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 #Javascript
vue界面发送表情的实现代码
Sep 11 #Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 #Javascript
关于ES6尾调用优化的使用
Sep 11 #Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 #Javascript
You might like
PHP常用代码
2006/11/23 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
对Python中range()函数和list的比较
2018/04/19 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python3字符串输出常见面试题总结
2020/12/01 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
J2EE相关知识面试题
2013/08/26 面试题
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
测控技术自荐信
2014/06/05 职场文书
研究生求职自荐书
2014/06/23 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python