最近在公司接到个需求，要求在表单元素填写时给出不同的校验状态。例如未输入值时，红字提示请输入，输入了不建议的值时，给出黄字提示，并且提交表单时，如果存在红字提示则不允许提交，有黄字提示则不影响仍可提交。
看了下element-ui的文档，只提供了error的校验状态，没有warning状态，没有黄字提示，如何完成这个需求？
首先定义一下需求：
- 定义一个活动名称输入框，为必填项
- 长度为3到5个字符，只作为黄字提示的警告，不影响提交表单
目前代码如下：仅支持红字校验提示
当前效果：
解决：
看了下文档，有一个form-item的作用域插槽，可以自定义表单校验信息，所以试一下这个作用域插槽来覆盖掉原本的校验提示。
通过这种方式，我们已经可以自定义校验信息展示，作用域插槽的error会自动获取rules里的message，所以我们可以通过自定义不同的message，通过message来判断当前是哪一种校验状态，再渲染出不同的dom。
效果：
此时提示文字已经可以根据颜色变化了，但是边框颜色依然是红色，毕竟现在只有一种error状态。我们可以通过css查找到warning状态的前一个.el-input元素，给这个元素加一个黄色边框，然后把.el-input 里的input元素的默认边框去除(因为似乎没法直接用css查找到某个元素的前一个元素的子元素。。。)
此时看效果默认边框没了，并且提示文字与输入框距离有点远，我们可以加上默认边框颜色，提示文字则用框架原本的类名
此时ui效果已经完成了，剩下的就是表单校验，点击按钮时，如果是warning状态的警告，应该允许表单提交，现在默认是不允许的。通过调用form.validate方法，回调函数里的第二个参数会返回校验信息，判断校验信息里是否有error状态的信息，有则不允许提交就可以了。
这样功能就完成啦，最终效果：
本文中有什么有错误的地方，还请各位大佬指教哈~
