el-input 表单验证失败修改边框颜色

当 el-input 表单验证失败时，可以通过修改其边框颜色来提示用户输入有误。具体实现方法如下：

1. 在 el-input 标签中添加 :class 属性，用于动态绑定样式类。

2. 在 data 中添加一个变量 error，用于保存是否出现错误的状态。默认为 false。

3. 在 el-input 标签中添加 v-model 绑定一个变量，用于保存用户输入的值。

4. 添加一个方法 validate，用于验证用户输入是否符合要求。在该方法中，根据需求判断用户输入的值是否合法，并将 error 变量设置为 true 或 false。

5. 在 :class 中绑定样式类时，根据 error 变量的值来动态设置样式类，如果 error 为 true，则添加一个名为 'is-error' 的样式类，该样式类用于设置输入框的边框颜色为红色，表示输入有误。

6. 在 el-input 标签中添加 @blur 事件，当输入框失去焦点时，调用 validate 方法进行验证。

7. 最后，在模板中添加 el-input 标签即可。

示例代码如下：

<template>
  <div>
    <el-input
      v-model="inputValue"
      :class="{'is-error': error}"
      @blur="validate"
    ></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      error: false
    }
  },
  methods: {
    validate() {
      // 判断用户输入是否合法
      if (this.inputValue === '') {
        this.error = true
      } else {
        this.error = false
      }
    }
  }
}
</script>

<style>
.is-error .el-input__inner {
  border-color: red;
}
</style>