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'); }); }; // 添加红色