vue3 el-input el-select 非空校验

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

1. 使用表单验证

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

<template><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="用户名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="选择" prop="select"><el-select v-model="form.select" placeholder="请选择"><el-option label="选项1" value="1"></el-option><el-option label="选项2" value="2"></el-option></el-select></el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form>
</template><script setup>
import { ref } from 'vue';
import { ElForm, ElInput, ElSelect, ElOption, ElButton } from 'element-plus';const form = ref({username: '',select: ''
});const rules = {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],select: [{ required: true, message: '请选择', trigger: 'change' }]
};const formRef = ref(null);const submitForm = () => {formRef.value.validate((valid) => {if (valid) {alert('提交成功!');} else {console.log('表单验证失败');return false;}});
};
</script>

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

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

<template><div><el-input v-model="username" :class="{ 'is-error': !username }"></el-input><el-select v-model="selected" placeholder="请选择" :class="{ 'is-error': !selected }"><el-option label="选项1" value="1"></el-option><el-option label="选项2" value="2"></el-option></el-select></div>
</template><script setup>
import { ref } from 'vue';
import { ElInput, ElSelect, ElOption } from 'element-plus';const username = ref('');
const selected = ref('');
</script><style>
.is-error .el-input__inner, .is-error .el-select .el-input__inner {border-color: red; /* 设置红色边框 */
}
</style>

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

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

<template><div><el-input v-model="username" :class="{ 'is-error': !username }" @blur="validateInput"></el-input><el-select v-model="selected" placeholder="请选择" :class="{ 'is-error': !selected }" @change="validateSelect"></el-select></div>
</template><script setup>
import { ref } from 'vue';
import { ElInput, ElSelect, ElOption } from 'element-plus';
import { nextTick } from 'vue'; // 用于等待DOM更新完成后再添加类名或移除类名。const username = ref('');
const selected = ref('');
const validateInput = () => { nextTick(() => { if (!username.value) document.querySelector('.is-error .el-input__inner').classList.add('red-border'); }); }; // 添加红色