element验证中根据条件决定是否是必填项

本文介绍了一个使用Element UI实现的表单验证规则示例,重点在于如何根据不同条件设置审核备注字段的验证规则。当价格状态不为特定值时,审核备注为必填项。

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

示例:
   <el-form-item label="审核备注" :label-width="formLabelWidth" prop="priceRemark" :rules="this.dialogForm.priceStatus!=3?rules.priceRemark:[{ required: false, message: '请填写审核备注', trigger: 'blur' }]">
   <el-input type="textarea" v-model="dialogForm.priceRemark" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
</el-form-item>
   


   data中的relus
   rules:  {
priceRemark: [
         { required: true, message: '请填写审核备注', trigger: 'blur' }
       ]
             }
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`输入框时,如果没有输入值,旁边的警示信息就会显示出来。如果在表单提交时输入框仍为空,提交操作会被阻止并展示警告。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值