Vue+ElementUI,input控件清空数据恢复问题

在Vue+ElementUI 中做数据校验。当用户输入错误时清空input控件在特定情况下会出现原有清空数据会恢复。这是因为在Vue中数据是双向绑定的,只清空控件文字但form表单中还有数据。

======  此问题暂无解决方案  =====

附问题代码:

1 <el-form-item label="编号" prop="asgnum" >
2     <el-input v-model="form.asgnum" auto-complete="off" placeholder="请输入编号" maxLength="50"
3               onblur ="if(this.value.replace(/[\u4E00-\u9FA5]/g,‘aa‘).length > this.maxLength){//超过就提示
4                         alert(‘不得超过‘ + this.maxLength + ‘个字符(中文占2个字符)‘);this.value=‘‘;}">
5     </el-input>
6 </el-form-item>

原文地址:https://www.cnblogs.com/ic710/p/10942104.html

时间: 2024-08-28 08:46:07

Vue+ElementUI,input控件清空数据恢复问题的相关文章

html input控件总结

Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等.当然这也是Input的默认类型. 参数name:同样是表示的该文本输入框名称. 参数size:输入框的长度大小. 参数maxlength:输入框中允许输入字符的最大数. 参数value:输入框中的默认值 特殊参数rea

HTML Input控件小结

Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text 输入类型是text,这是我们见的最多也是使用最多的,比如登陆输入用户名,注册输入电话号码,电子邮件,家庭住址等等.当然这也是Input的默认类型. 参数name:同样是表示的该文本输入框名称. 参数size:输入框的长度大小. 参数maxlength:输入框中允许输入字符的最大数. 参数value:输入框中的默认值 特殊参数rea

实时监测input控件value值动态变化的事件

目录 [1]input [2]propertychange [3]兼容处理 前面的话 HTML5为input控件新增了很多type属性,大大增加了input控件的应用场景.其中一个是type="range"的input控件,可以通过拖动游标改变value值,但并不是所有浏览器都可以实时显示,除了IE10+浏览器 说到改变value值的事件,首先想到的便是change事件,但change事件的触发条件是失去焦点并且value值改变.而游标拖动并没有失去焦点.所以,change事件并不能达

给上传文件的input控件&quot;美容&quot;

作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工作中也遇到了这个问题.解决以后想着人生在于总结.于是乎就把这个简单的demo记录下来. html代码 <form action=""method="post"enctype="multipart/form-data"> <a hre

给上传文件的input控件“美容”

在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮. demo: html代码 1 <body> 2 <form action="" method="post" enctype="multipart/form-data"> 3 <a href="#" class="a-uploa

vue表单控件绑定+自定义组件

vue表单控件绑定 v-model 在表单控件元素上创建双向数据绑定 文本框双向绑定 多选框演示 下拉列表演示 vue自定义组件 组件放在components目录下 组件基本要素:props  $emit 通过import导入自定义组件 制作一个倒计时组件: 1.在conponents目录下,新建一个time.vue 方法写在mouted声明周期函数内,代码如下: 然后在index.vue中使用组件: 我之前组件命名为time,可能与默认什么冲突了,然后报错不让用,所以改名成cyytime 但是

Vue 表单控件绑定

表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder=&qu

获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的.可...微信小程序除外,虽然显示值还是value={{jsproperty}}.整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了. 如何获取呢?大体上两种办法: 一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput.bindblur.前者是录入时处理,后者是控件失去焦点时处理.如果每个控件都需要一个绑定的方法,这当然是可怕

C# DataGridView控件清空数据完美解决方法

C# DataGridView控件绑定数据后清空数据在清除DataGridview的数据时: 1.DataSource为NULL(DataGridView.DataSource= null;)这样会将DataGridView的列也删掉. 2.用DataGridview.Rows.Clear();  提示“不能清除此列表”!!!!! 以上都不是想要的结果.想要满足保持原有的列,就是重新绑定之前的DataTable,然后清除DataTable中的数据,如下: DataTable  dt  =  (D