elementUI如何让输入框变红

要让 ElementUI 中的输入框变红，可以使用 ElementUI 提供的表单验证功能。具体步骤如下：

1. 在输入框上添加验证规则属性 `:rules`，并绑定一个数组对象，例如：

<el-form-item label="用户名" prop="username">
  <el-input v-model="username" :rules="usernameRules"></el-input>
</el-form-item>

2. 在 Vue 实例中定义验证规则数组对象，并在其中添加一个 `validator` 函数，用于验证输入框的值是否符合要求，如果不符合，则返回一个错误信息：

data() {
  return {
    username: '',
    usernameRules: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符之间', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value !== 'admin') {
            callback(new Error('用户名必须为 admin'));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      }
    ]
  }
}

3. 在需要显示错误信息的元素上添加 `show-error` 属性，例如：

<el-form-item label="用户名" prop="username">
  <el-input v-model="username" :rules="usernameRules" show-error></el-input>
</el-form-item>

4. 在 CSS 样式中定义错误信息的样式，例如：

.el-form-item__error {
  font-size: 12px;
  color: red;
}

这样，当用户输入的值不符合规则时，输入框会自动变成红色，并在输入框下方显示错误信息。