vue3 el-input el-select 非空校验

在Vue 3中使用el-inputel-select组件进行非空判断,并在非div标签上显示红色边框,可以通过以下几种方法实现:

1. 使用表单验证

使用Element Plus的表单验证功能,可以很方便地实现非空判断。你可以将el-inputel-select放入el-form-item中,并使用rules属性来定义验证规则。


 

2. 自定义CSS样式进行非空判断显示红色边框

如果你想要在非空验证失败时,直接在输入框或选择框上显示红色边框,可以通过动态绑定class来实现。例如:


 

 

3. 使用CSS伪类进行动态样式控制(更灵活)

为了使样式更加灵活,可以结合JavaScript来动态添加或移除类:


 

                    
                    

你可能感兴趣的:(vue.js,javascript,前端)