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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
python处理按钮消息的实例详解
2017/07/11 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
青年创业培训欢迎词
2014/01/10 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
函授生自我鉴定
2014/03/25 职场文书
信息管理专业自荐书
2014/06/05 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python 如何执行控制台命令与操作剪切板
2021/05/20 Python