解决问题：vue开发，el-input使用强制刷新后，表单验证只取第一次验证结果

最新推荐文章于 2024-06-13 19:47:01 发布
最新推荐文章于 2024-06-13 19:47:01 发布
阅读量1.9k 收藏 5
点赞数 3
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HLJ10540/article/details/121858832
版权
在Vue开发中遇到el-input使用@input="$forceUpdate()"强制刷新后，表单验证结果无法实时更新的问题。当输入为空并点击外部后，验证始终显示为空错误。解决方法是定义自定义校验规则，在data()中创建校验方法。另外，当使用自定义的required判断参数时，label前不会显示星号。为了解决这个问题，可以在el-form-item中添加特定的class。
摘要由CSDN通过智能技术生成 
 <el-form-item prop="a" :rules="[{ required: this.isneed, message: '不能为空', trigger: 'blur' }]">
 //isneed根据表单另一个数据变化
              <el-input v-model="form.a" maxlength="6" @input="$forceUpdate()"/>            </el-form-item>
<
最低0.47元/天 解锁文章
HLJ10540
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解决input值的双向绑定
kerryqpw的博客
12-28 1万+
在使用vue进行双向绑定的时候，第一想到的肯定是官方语法｛｛msg｝｝，但是在input中如果这样想，那就错啦。 错误的写法如下：&lt;input type="text" value="{{item.age}}" /&gt; 既然这种写法是错误的，那么怎样才能实现在input中的数据双向绑定呢？方法如下： 用v-model进行绑定 &lt;input type="text" v-mode...
Vue.js：element-ui组件库el-form表单el-input输入框按下回车键会刷新页面的问题
彭世瑜的博客
04-29 1211
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为 <el-input v-model="value" @keyup.enter.native="handleEnter"/> 需要在el-form 中阻止表单的默认提交行为 <el-form @submit.native.prevent> <el-input v-model="value" @keyup.enter.native="handleEnter"/> <
表单校验 —— 只检验某一项
小草莓的博客
10-26 1549
ruleValidate: { phone: [ {required: true, message: '请输入新手机号码', trigger: 'blur'}, ] } //点击“获取验证码”时，校验手机号码 emitPhone(){ this.$refs["phone"].onBlur() }, ...
vue 中多个表单元素控一个校验规则
最新发布
xaiobit_hl的博客
06-13 342
最后再去页面上 checkbox 的地方绑定一个 change 事件，去触发左边的校验即可。
VUE动态表单校验
jing2623的博客
10-14 1856
VUE动态表单校验 功能描述 用户可以添加一个员工，也可以同时添加多个员工，但是每个员工的对应表单都存在表单校验 效果图 代码如下 <!-- --> <template> <div class=''> <!-- 添加员工信息弹出层 --> <el-dialog title="添加员工" :visible.sync=...
多个相同name 的 input 输入框只会验证第一个问题
wbj16116的博客
03-11 286
把以下代码在页面上边执行就可以了 if ($.validator) { $.validator.prototype.elements = function () { var validator = this , rulesCache = {}; // select all valid inputs inside the form (no submit or reset buttons)
vue element $forceUpdate()强制重新渲染后校验失效的问题
疑问 搜索 动手 解决 记录
03-02 6054
链接 : vue element $forceUpdate()强制重新渲染后校验失效的问题
vue:el-input输入时限制输入的类型操作
10-15
在使用Vue框架结合Element UI组件库开发应用时，el-input组件是一个常用的表单输入框，它可以用来获取用户的输入数据。然而，在实际应用中，我们往往需要对用户的输入进行限制，比如限制输入类型、输入格式、输入...
vue中el-input绑定键盘按键(按键修饰符)
10-15
在Vue中，el-input是一种常用的表单输入组件，它是Element UI库中的一部分。当需要对el-input绑定键盘事件时，尤其是使用键盘修饰符来监听特定按键的触发，就涉及到了Vue的键盘事件绑定规则。Vue允许开发者将键盘...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
总结起来，使用Element-UI和Vue.js解决表格内表单验证问题，需要理解`el-form`和`el-form-item`的绑定机制，以及如何动态生成`prop`属性。通过正确地配置数据模型和验证规则，可以轻松实现复杂表单的验证，提高用户...
关于使用element创建form时，用validate校验第一个元素校验失效的问题
qq_42810352的博客
04-23 640
这里的div包含了两个表，一开始用v-if来判断是否可以进入编辑页面 发现负责人姓名一栏的校验没有效果，但手机号码能被校验 交换位置之后也是处于后面的那个可以被校验 经过尝试发现，在负责人姓名前加一个空的form-item可以实现校验，但不知道原理 后来经指点发现，把一开始的v-if改成v-show就能实现校验了 原理和v-show 只是隐藏控件 , 不是将其销毁，v-if是真正地销毁和创建控件有关吧 这里并不需要频繁切换状态但是应该使用v-show ...
关于动态表单字段校验的问题
weixin_43845028的博客
06-01 466
在prop中，需要按照 :prop=" 'list.' + index + '.field'" 这种格式，其中list是需要循环的数组名，index是数组每项的下标，maintUnit是当前需要进行校验字段名。在使用Element +使用了动态生成表单,对相关字段进行校验,使用一般的表单校验方法会出现问题。动态表单需要校验的每一项必须单独绑定验证规则。
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效——基础积累
yehaocheng520的博客
05-09 7194
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填，亲测有效
vue中清空搜索框(input)之后自动刷新(获取)列表
SunFlower的博客
11-11 1538
vue中清空搜索框(input)之后自动刷新(获取)列表 使用可清除输入框，用clearable属性 核心代码 演示代码
el-input 回车键刷新页面问题的解决
X_iao_yun的博客
01-28 377
【代码】el-input 回车键刷新页面问题的解决。
Vue进阶（幺叁柒）：动态表单校验
IT全栈 华强工作室
10-13 2744
在前期博文《Vue进阶（三十）：vue中使用element-ui进行表单验证》、《Vue进阶（幺幺叁）：关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题》、《Vue进阶（幺贰幺）：表单校验注意事项》中主要讲解了form表单校验应遵守的约定及常见问题解决方法。在实现动态表单，且表单项为后台动态生成时，若form表单属性不存在，但是在data中rules下定义了表单属性的校验规则，IE下就会给出相应的错误提示："please transfer
el-input 输入手机号
Future1994的博客
12-20 1996
<el-form-item label="手机号：" prop="phone"> <el-input v-model="identityForm.phone" onkeyup="value=value.replace(/[^\d]/g,'')" @blur="identityForm.phone = $event.target.value" :placeho...
vue强制更新$forceUpdate()
weixin_30851867的博客
05-12 333
调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。 <template> <div> home <button @click="reload()">强制更新</button> </div> </template> <script> ...
vue3中el-input表单验证
08-18
在Vue 3中，可以使用element-plus组件库中的el-form和el-form-item来进行表单验证。首先，在template中使用el-form组件，并将需要验证的表单项包裹在el-form-item中。例如，可以像这样设置一个姓名输入框的验证： ```html <el-form :model="editForm" ref="editFormRef"> <el-form-item label="姓名:" prop="name" :required="true"> <el-input v #### 引用[.reference_title] - *1* *2* *3* [vue3之表单验证](https://blog.csdn.net/attach_uzi/article/details/120442143)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值