elementUI form 校验不消失

最新推荐文章于 2023-09-06 11:14:09 发布
最新推荐文章于 2023-09-06 11:14:09 发布
阅读量710 收藏
点赞数
分类专栏： element-ui 文章标签： element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014685642/article/details/123807047
版权

el-form 标签必须有:model="dataForm"

el-form-item 标签必须有 prop="**"

el-input 标签  v-model  属性必须对应 el-form  el-form-item

孤独白鲸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作Elem
07-24
ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单相关操作ElementUI form表单...
vue elementui form表单验证的实现
10-17
主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
关于element ui 中使用表单校验字段，校验一直不消失的问题
weixin_54938190的博客
02-17 2940
关于element ui 中使用表单校验字段，校验一直不消失的问题
Element form表单校验不消失问题
热门推荐
ZHANGWEI19930118的博客
02-26 1万+
今天在使用Element表单校验的时候遇到的问题，有一个下拉框在第一次什么都不选时点击提交会触发校验提示，但是当提示后在为下拉框选择值得时候校验的提示依然存在不会消失。搞了好久都没找到问题，后来在百度上发现解决方法， 原因是表单域的item项的prop与组件的绑定值v-model的值要一样，比如;prop="aaa"那么v-model的值也要等于“aaa” ...
使用element-ui表单验证时,number验证一直出现提示,提示不消失
old_hu的备忘录
05-06 5828
使用饿了么提供的表单数字验证时,明明输入的也是数字,但是提示的红色字体一直不消失,后来发现,就算输入的是数字,但是input输出的也是字符串, 所以在v-model加上.number---- v-model.number=" " 即可解决问题 ...
el-form 中使用:rules校验，输入内容后红色提示没消失
qq_43532275的博客
03-28 3075
chooseImg(val) { this.chooseIndex = val }, // 获取图片url 注释的是没生效的，this.$set方法可以处理输入内容后红色提示没有消失的问题 getImg(data) { switch (this.chooseIndex) { case 1: this.$set(this.form, 'image1', data) // this.form.im...
elementUI——el-form表单数据校验（包含数组循环）
weixin_42289080的博客
05-11 8048
prop需要对应到表单数据的具体的key，数组可通过索引锁定
vue elementUI 表单校验功能之数组多层嵌套
10-16
这允许我们在不使用内嵌 `el-form` 的情况下实现校验。示例代码如下： ```html (item, index) in dataFields.list" :key="index"> <el-form-item label="name" :prop="`list[${index}].name`" :rules="{ ...
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementUI el-form表单校验不消失 强制去掉校验
m0_64491262的博客
02-10 4129
尝试变更form中字段的默认类型,修改rules的change或者blur,都没用.最后选择给form绑定change事件,有值时取消校验.直接点击提交或保存,弹出校验信息('请输入xxxxxx')在输入框中输入信息后,校验信息无法自动消失。
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
weixin_46463341的博客
10-18 9299
ElementUI表单验证 错误提示不消失原因（最全面，一次解决）
elementUI 表单校验-----取消小星星
ccyolo的博客
03-01 2287
elementUI---表单校验 取消红色星号
【element-ui】 el-form之rules赋值后校验没消失
最新发布
小墨鱼的前端问题录
09-06 3006
错误原因是在return中定义了一个空对象formLabel,在校验过程中，formRules值找不到对应的formLabel值，此时就出现了在输入框中赋值之后，校验不消失。
element的form表单校验数组处理
kekexiaomayi的博客
11-21 3993
element的form表单校验数组处理
vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法
qq_38876396的博客
06-23 5272
本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法
vue element form表单规则验证，有值，但验证始终不消失
qq_39797360的博客
07-09 1万+
有值验证不消失的效果图 1.检查v-model绑定值和prop属性绑定值是否相同 （1）绑定值 （2）规则 （3）规则与值相同，是对的 到这步一般就能解决，但我的问题没解决 2.想到选择赋值之后，取消这项验证 //取消单项验证 this.$refs.dataForm.clearValidate('dutyPerson'); well，well，well还是不消失 3.点击弹出窗口时，强行赋个空值 // 新增 add() { this.dialog.title = "新增档案
【vue】element-ui的form数组表单验证（循环表单验证）
qq_39576711的博客
03-30 1万+
基于vue2.0的element-ui的form表单验证比较简单，但是有些同学可能对于数组类型的表单验证无从下手，这里我基于一个我自己项目中的例子，展示一下怎么进行数组的表单验证。 项目截图： 上代码,为了让大家看起来比较清晰，我删掉了无关的代码： <template> <div class="create_send"> <el-form ref="refForm" :model="formData" :rules="rules"> <el-
为什么elementui表单验证提示不消失？
weixin_39238520的博客
09-18 2138
如下图所示，验证name和v-model的name是一样的 这里的嵌套是单一值的判断。 如果想要判断循环下嵌套的属性或者值的话，需要用到把:rules=‘[]’写到el-form-item里面，下面v-model的值要和el-form-item的prop一致，模式为如下图所示 再者可参考官网的邮箱域名哪里，就可以了 ...
vue v-if form校验不消失
07-27
你可以使用 Vue 的 v-if 指令和表单校验库来实现表单校验，并使错误消息在校验通过后消失。下面是一个简单的示例： 首先，你需要引入一个表单校验库，比如 VeeValidate。你可以在项目中安装它： ```bash npm install vee-validate ``` 然后，在你的 Vue 组件中，你可以使用 v-if 和 VeeValidate 来实现表单校验和错误消息的显示和隐藏。以下是一个示例代码： ```html <template> <div> <input v-model="email" type="text" name="email" placeholder="Email"> <span v-if="errors.has('email')">{{ errors.first('email') }}</span> <button @click="submitForm">Submit</button> </div> </template> <script> import { required, email } from 'vee-validate/dist/rules'; import { extend } from 'vee-validate'; import { ValidationProvider, ValidationObserver } from 'vee-validate'; extend('required', { ...required, message: 'This field is required' }); extend('email', { ...email, message: 'Invalid email format' }); export default { data() { return { email: '', errors: {} }; }, methods: { submitForm() { this.$validator.validateAll().then(result => { if (result) { // 校验通过，执行提交逻辑 } }); } }, components: { ValidationProvider, ValidationObserver } }; </script> ``` 在上面的代码中，我们首先引入了 VeeValidate 的校验规则和组件，然后在 data 中定义了 email 和 errors 变量。在模板中，我们使用 v-model 来绑定 email 变量，使用 v-if 来判断是否有错误消息需要显示，使用 errors.has 和 errors.first 方法来获取错误消息。在 submitForm 方法中，我们调用 this.$validator.validateAll() 来触发表单校验，校验通过后执行提交逻辑。 这样，在表单校验通过后，错误消息就会消失。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孤独白鲸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值