关于Elementui输入框有值，校验一直有提示问题

最新推荐文章于 2023-08-23 15:49:44 发布
最新推荐文章于 2023-08-23 15:49:44 发布
阅读量2.2k 收藏 8
点赞数 4
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46156770/article/details/113331233
版权

关于Elementui输入框有值，校验一直有提示问题

1、prop的值必须要和v-model的值一致

在这里插入图片描述

2、只要用到prop，validate这些校验，form必须有model这个属性

在这里插入图片描述
官方文档也有介绍
在这里插入图片描述

weixin_46156770
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
input输入框中禁止输入小数和负数（*只允许输入正整数 *） 最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两个办法，在这里跟大家分享一下。（因为是刚毕业，第一次写博客，所以有点生疏，请各位大佬担待一些） 方法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的 首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。 然后我们传个$event对象进去来获取原生的DOM（可以简单理
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 4537
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
elementUI from表单必填项已有值但是提示信息还在
zhengyun1568的博客
11-18 5522
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-it
解决在element form中输入了内容，却依旧显示，你没有输入内容的问题
m0_51092575的博客
10-15 1730
解决在element form中输入了内容，却依旧显示，你没有输入内容的问题
Elenment UI表单验证时，有值但还是提示错误，表单验证失效问题
Java___orz的博客
07-07 8002
解决Elenemt UI表单验证失效问题，三种解决方式都在这里，看这一篇就够了
解决element-ui form表单校验明明有值，校验的错误提醒还在
sun0_cat的博客
06-08 7853
问题： 我的form表单用的是最简单的非空校验，点击提交按钮，输入几个值，然后在点提交按钮，一部分的值还在显示错误校验 解决： 将rules里的校验顺序重新排列一下
el-input赋值回显，校验未关闭解决办法
weixin_43925947的博客
04-29 2249
需求：一个输入框 在用户focus的时候给一个选择的弹窗进行进行单选 然后回显给当前页面的e-input输入框 问题：每次回显的时候校验不通过 解决办法：使用validate-on-rule-change 默认为true 改成false就好了 解决代码 <el-form :model="ruleForm" :...
Element UI进行表单校验的时候，输入正确内容后，还有提示问题
weixin_52727969的博客
03-31 5522
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。1.看看你的el-form 是否绑定了值model并且model后面的名称是否和你后面表单输入时使用的名称相同；2.el-form 是否绑定了验证规则：rules(起个名字我们的提示信息就是在这里面写的)字眼表明其主要的使用场景是在组件内部，后面的那一大段是说明缘由的。的值是否和rules的值对应。
Element form表单校验不消失问题
ZHANGWEI19930118的博客
02-26 1万+
今天在使用Element表单校验的时候遇到的问题，有一个下拉框在第一次什么都不选时点击提交会触发校验提示，但是当提示后在为下拉框选择值得时候校验的提示依然存在不会消失。搞了好久都没找到问题，后来在百度上发现解决方法， 原因是表单域的item项的prop与组件的绑定值v-model的值要一样，比如;prop=&quot;aaa&quot;那么v-model的值也要等于“aaa” ...
vue-element-ui下拉多选验证问题
qq_37916164的博客
11-09 2745
页面多选下拉框显示出验证信息问题 第一种解决办法： 1.在校验规则里加type："array"; 2.下拉多选框绑定的变量初始值设置为[]. personnelDescription: [ {type:"array",required: true, message: '请输入', trigger: ['blur', 'change']} ], this.ruleFormAdd = {personnelDescription:[]}; 第二种解决方案： 将验证规则改为自定义的validat
js输入框使用正则表达式校验输入内容的实例
10-20
下面小编就为大家带来一篇js输入框使用正则表达式校验输入内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为输入框加入数字js校验代码分享
01-21
js限制只能数字输入，并且在把输入的“非法字符”清除掉之后将焦点停留在输入非法字符的位置，参考如下： ... <input value= type=text onkeyup=[removed]RepNumber(this)> JavaScript部分: ...
Element学习之表单验证输入框提示不消失
qq_41720578的博客
05-26 4361
在学习Element UI时碰见了一个让人头疼的问题，碰巧发现输入框提示信息一直消失 几经辗转才找到错误，最后发现原来是 el-form-item中的prop 要与 el-input中v-model绑定的值一致。仔细一样，不一致他那上验证去，所以才会一直提示。 <div id="app"> <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card"> .
ElementUi使用表单验证出现验证问题
Du990725的博客
02-16 366
ElementUi使用表单验证出现验证问题 使用ElementUi表单验证的时候，明明已经输入值了，但是点击的时候还是不能校验，提示输入或者请选择问题 解决方式就是：看一下v-model中绑定的名称和校验规则的名称是否相同 比如：我这里v-model绑定的是loginForm中的username,那么我el-form-item中的prop绑定的属性名称就要和v-model绑定的属性相同，即：都为username <!-- 登录表单 --> <el-form
解决element的表单校验输入框有值但校验未通过的问题
热门推荐
JCat的博客
07-26 4万+
实际项目中，为了精简代码，会涉及到在同一个表单中同时完成 查看编辑 新增等功能， 此篇解决： 1. 编辑的时候，明明给页面回显赋值了，但是校验非空却没有通过的问题。 2. 表单刚一进页面就校验非空，显示红色提示的问题。 3.常规表单关于校验的规则。
elementUi——form表单中input组件输入内容后依旧提示不能为空(v-for循环遍历)
yehaocheng520的博客
06-08 3797
最近在做后台管理系统时，发现了一个form表单中rules表单校验的问题： 由于我这个地方需要在点击“添加”按钮时，会添加重复的内容。因此我整个结构使用的是：v-for循环遍历，又因为我需要对单价一项进行校验（必填和数字类型的校验），单价一项的prop不具有唯一性，因此考虑到规则校验，所以将规则写在行间。 html结构代码如下： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="dem
el-form表单当输入框或选择框有内容仍出现提示问题
最新发布
flaw_saint的博客
08-23 239
vue列表点击新增、编辑时，避免出现错误的红色提示
Element UI -- form表单验证必填时，有值时依旧验证不通过
SiaEyre
09-20 5516
使用Element UI form表单验证时 <el-form-item v-if="item.C_type=='input_text'" class="components" :prop="item.C_name" :rules="{required: item.props.rules.required...
el-tree 树的全部展开和收起
weixin_46156770的博客
01-26 8616
架构树el-tree需要实现全部展开和全部收起功能，查阅资料借鉴别人的经验终于实现 this.$refs.tree.store 打印出来的是这样的数据，里面的expanded就是控制展开收起的功能 <div class="expand"> <el-button size="small" @click="expandHandle">{{ expandAll ? "全部收起" : "全部展开" }}<
elementui中对表格中每行输入框做表单校验
05-30
你可以使用 elementui 中的表单校验来对表格中的每行输入框进行校验。 首先，在表格中定义每行输入框时，需要使用 `el-form-item` 组件包裹每个输入框，并设置 `prop` 属性，用于在校验时区分不同的输入框。 例如： ``` <el-table> <el-table-column prop="name" label="名称"> <template slot-scope="scope"> <el-form-item prop="name"> <el-input v-model="scope.row.name"></el-input> </el-form-item> </template> </el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <el-form-item prop="age"> <el-input v-model="scope.row.age"></el-input> </el-form-item> </template> </el-table-column> </el-table> ``` 然后，在表单中添加 `el-form` 组件，并设置 `ref` 属性，用于在代码中获取表单对象。同时，还需要为每个输入框设置校验规则，并在表单校验时调用校验方法。 例如： ``` <el-form ref="form" :model="formData" :rules="formRules"> <el-table> ... </el-table> </el-form> ``` ``` data() { return { formData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 } ], formRules: { name: [ { required: true, message: '请输入名称', trigger: 'blur' } ], age: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字', trigger: 'blur' } ] } } }, methods: { validateForm() { this.$refs.form.validate(valid => { if (valid) { // 校验通过，提交表单 } else { // 校验失败，提示错误信息 } }) } } ``` 在上面的代码中，`formData` 数组中包含了表格中每行的数据，`formRules` 对象中定义了每个输入框的校验规则。在 `validateForm` 方法中，调用了表单的校验方法 `validate`，并在回调函数中根据校验结果进行处理。 需要注意的是，由于表格中的每行输入框是动态生成的，因此需要在每次表格数据发生变化时重新设置校验规则，可以在 `watch` 中监听数据变化，然后调用 `resetFields` 方法重置表单，再设置新的校验规则。 例如： ``` watch: { formData: { deep: true, handler() { this.$nextTick(() => { this.$refs.form.resetFields() this.$refs.form.clearValidate() this.setRules() }) } } }, methods: { setRules() { const rules = {} this.formData.forEach((item, index) => { rules[`name.${index}`] = [ { required: true, message: '请输入名称', trigger: 'blur' } ] rules[`age.${index}`] = [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字', trigger: 'blur' } ] }) this.formRules = rules } } ``` 在上面的代码中，`setRules` 方法根据表格数据动态生成校验规则，然后通过 `this.formRules = rules` 将校验规则设置到表单中。在 `watch` 中监听 `formData` 变化时，调用 `this.setRules()` 方法重新设置校验规则。同时，调用 `this.$refs.form.resetFields()` 方法重置表单，以清除之前的校验状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值