element表单校验有值但是一直出现提示解决

最新推荐文章于 2024-07-13 14:18:00 发布
最新推荐文章于 2024-07-13 14:18:00 发布
阅读量121 收藏
点赞数 1
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62236405/article/details/140126766
版权

这是在新增修改弹出框里，有一个选择节点的输入框

但是会出现这种情况

选了之后还会出现提示，后来发现我在弹窗初始化的时候把绑定的数据设为空了，这原本是因为点击新增之后弹框数据不是空白的，回显了修改的数据，所以置为空，这竟然会导致表单校验的错误，所以后来在弹窗取消的时候值为空值就不会出现这种错误

哈哈哈哈哈哈哈哈哈哈哈一天天
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue+ element ui 表单验证有值但验证失败问题
01-19
一.如图：有值但是验证失败 二. 数据模板 prop=template> 请输入数据模板 readonly=true> export default { data()
使用element表单校验(表单有值但是一直提示错误)
cxz
06-09 1037
今天做了一个element表单的必输项，图片明明上传了，而已提交的时候打印也有值，但一直报错，如下图 最后检查发现，给form表单的:model = ‘form’ 绑定的form属性，缺少了封面的字段， form的值和rules校验规则中的字段名要一样，且不能缺 ...
回显有值但是校验不通过 表单有值校验失败 element校验问题
Taurus_666
04-26 7446
element表单有值校验失败，页面回显有值校验失败问题解决方案
使用element表单校验必填错误的解决方法(表单有值但是一直提示错误)
my466879168的博客
03-10 1万+
表单校验错误(input框有值提交的时候一直提示错误) 昨天做了一个element表单的必输项，当时还能用，现在就用不了了，输入了值一直报错未输入，如下所示： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDRp1808-1583853736237)(http://image-static.codingdylan.com/img/Snipaste_2020-03-...
解决element的表单校验输入框有值但校验未通过的问题
热门推荐
JCat的博客
07-26 4万+
实际项目中，为了精简代码，会涉及到在同一个表单中同时完成 查看编辑 新增等功能， 此篇解决： 1. 编辑的时候，明明给页面回显赋值了，但是校验非空却没有通过的问题。 2. 表单刚一进页面就校验非空，显示红色提示的问题。 3.常规表单关于校验的规则。
解决Vue+Element-UI 进行From表单校验时出现了英文提示问题
cdtaogang's blog
08-08 2052
规则时就会需要表单输入框输入数据删除为空时，出现英文校验提示信息。将required属性放在el-input元素上即可，问题解决。表单时，往往会对表单字段进行校验，字段为必填项时会添加。
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...
vue+element实现表单校验功能
12-09
表单校验功能:   实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules=”rules”;ref=”reference” 2.在el-form-item定义prop=”name”; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 ...
vue3 开始时间与结束时间比较验证（结束时间需要大于开始时间）
SummerGao
07-10 279
vue3验证结束时间需要大于开始时间
解决树形表格 第一列中文字没有对齐
weixin_49352307的博客
07-09 298
二级分类与一级分类的文字没有对齐。
表单代码示例
温暖前端的博客
07-07 990
<template> <el-form ref="form" :model="formData" :rules="formRules" label-width="100px"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form
在vue3中，手写父子关联，勾选子级父级关联，取消只取消当前子级，父节点不动
qq_35452726的博客
07-09 393
在vue3中，手写el-tree父子关联，勾选子级父级关联，取消只取消当前子级，父节点不动
VUE2用elementUI实现父组件中校验子组件中的表单
小白的学习路
07-11 208
需求是VUE2框架用elementUI写复杂表单组件，比如，3个相同功能的表单共用一个提交按钮，把相同功能的表单写成一个子组件，另一个父组件包含子组件的重复调用和一个提交按钮，并且要求提交时校验必填项。2.子组件中写了this.$refs.form?.map...是因为真实项目中el-form是进行了循环的，这里可以自定义修改。1.validate函数不传参数就会返回一个promise。3.父组件中要用promise来处理调用子组件的方法。
vue中table内容和lable对不齐解决方案
qq_51856496的博客
07-13 188
【代码】vue中table内容和lable对不齐解决方案。
Vue.js框架+Axios发送异步请求+elementui前端布局框架
m0_74194490的博客
07-11 1322
1.JavaScript框架2.简化Dom操作3.响应式数据驱动语法：data：{key：value，//（value类型可以是Number、boolean、String、Object、Arrays、underfined。
100款古风PPT (80).pptx
最新发布
07-13
【ppt素材】工作总结、商业计划书、述职报告、读书分享、家长会、主题班会、端午节、期末、夏至、中国风、卡通、小清新、岗位竞聘、公司介绍、读书分享、安全教育、文明礼仪、儿童故事、绘本、防溺水、夏季安全、科技风、商务、炫酷、企业培训、自我介绍、产品介绍、师德师风、班主任培训、神话故事、巴黎奥运会、世界献血者日、防范非法集资、3D快闪、毛玻璃、人工智能等等各种样式的ppt素材风格。 设计模板、图片素材、PPT模板、视频素材、办公文档、小报模板、表格模板、音效配乐、字体库。 广告设计：海报，易拉宝，展板，宣传单，宣传栏，画册，邀请函，优惠券，贺卡，文化墙，标语，制度，名片，舞台背景，广告牌，证书，明信片，菜单，折页，封面，节目单，门头，美陈，拱门，展架等。 电商设计：主图，直通车，详情页，PC端首页，移动端首页，钻展，优惠券，促销标签，店招，店铺公告等。 图片素材：PNG素材，背景素材，矢量素材，插画，元素，艺术字，UI设计等。 视频素材：AE模板，会声会影，PR模板，视频背景，实拍短片，音效配乐。 办公文档：工作汇报，毕业答辩，企业介绍，总结计划，教学课件，求职简历等PPT/WORD模板。
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
07-13
多旋翼飞行器设计与控制理论 -第15讲_展望V2.pdf
光伏项目设备资产配置方式论证报告.doc
07-13
光伏项目设备资产配置方式论证报告.doc
1720843046670.png
07-13
1720843046670.png
vue element 表单校验判断输入是否有指定值
07-12
在Vue Element中，你可以使用表单校验器来判断输入是否有指定的值。下面是一个简单的示例代码： ``` <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item prop="inputValue" label="输入值"> <el-input v-model="form.inputValue"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { inputValue: '' }, rules: { inputValue: [ { required: true, message: '请输入值', trigger: 'blur' }, { validator: this.validateInputValue, trigger: 'blur' } ] } }; }, methods: { validateInputValue(rule, value, callback) { if (value === '指定值') { callback(); } else { callback(new Error('输入值不符合要求')); } }, submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单校验通过，执行提交操作 console.log('表单校验通过'); } else { // 表单校验不通过 console.log('表单校验不通过'); } }); } } }; </script> ``` 在上面的示例中，我们首先定义了一个表单对象 `form`，其中包含一个 `inputValue` 属性来存储输入的值。然后，我们定义了校验规则 `rules`，其中 `inputValue` 属性的校验规则包括必填规则和自定义的校验器规则。 在 `validateInputValue` 方法中，我们使用自定义的校验器来判断输入值是否为指定值。如果输入值等于 '指定值'，则调用 `callback()` 方法表示校验通过；否则，调用 `callback(new Error('输入值不符合要求'))` 方法表示校验不通过。 最后，在 `submitForm` 方法中，我们通过 `$refs.form.validate()` 方法对整个表单进行校验。如果表单校验通过，就可以执行提交操作；否则，可以进行相应的错误处理。 这是一个简单的示例，你可以根据具体的需求进行更复杂的表单校验判断。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值