element plus 必填项正确填写后仍有提示信息、标红

确保在使用el-form时将model正确绑定到`queryParams.attribute`,并且el-form-item的prop应与el-input中的绑定属性一致,如`value`,遵循这些规则可避免常见错误。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一般检查以下两点即可改正 

  1. <el-form ref="queryFormRef" :model="queryParams.attribute" :inline="true">                      此处用的是 el-form 的 model 属性,而不是v-model

  2. el-input 中必须绑定 v-model 属性

  3. <el-form-item prop="value">                                                                                                      此处的 prop 需要和 el-input 中绑定的属性名保持一致

以上三点确认后基本就不会有问题了

 

 

HTML的`<input>`元素默认并不会在用户不操作时自动提示必填字段的要求,因为浏览器的表单验证通常是用户主动触发的行为,比如提交按钮点击或失去焦点等。如果你想要在输入框未填写内容时就显示提示信息,通常需要借助JavaScript来实现这个动态验证功能。 你可以通过添加一些JavaScript事件监听器,例如`onfocusout`(失去焦点)或`onsubmit`(表单提交前),当输入框为空时显示警告消息。以下是一个简单的例子: ```html <!DOCTYPE html> <html lang="zh"> <head> <title>必填字段验证示例</title> <style> .required-field-warning { display: none; } </style> </head> <body> <form id="myForm"> <label for="name">姓名:<input type="text" id="name" required></label> <span class="required-field-warning" id="nameWarning">姓名不能为空</span><br> <input type="submit" value="提交"> </form> <script> document.getElementById('name').addEventListener('blur', function() { if (!this.value) { this.nextElementSibling.style.display = 'block'; } else { this.nextElementSibling.style.display = 'none'; } }); // 或者使用更复杂的验证策略,如表单提交前校验 document.getElementById('myForm').addEventListener('submit', function(e) { var nameInput = document.getElementById('name'); if (!nameInput.value) { e.preventDefault(); // 阻止表单提交 nameInput.nextElementSibling.style.display = 'block'; } }); </script> </body> </html> ``` 在这个例子中,当你离开`name`输入框时,如果没有输入值,旁边的警示信息就会显示出来。如果在表单提交时输入框仍为空,提交操作会被阻止并展示警告。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值