大佬们，如何用js实现，文本框校验，显示错误信息时能在input下面，而且在错误信息前面加个图片啊？

Question

类似图中这种效果

Answer 1

用JS实现比较简单。
初始化检测内容为空，则提示错误信息。
用户输入完内容可以使用onBlur事件。光标离开的时候触发校验函数，然后函数里面拿到输入框的val，进行正则匹配火其他规则的校验。

Answer 2

element-ui 是支持的，一般来说正常的 UI 库都是有这样功能的。

如果是纯原生的话，那么就是

<div class="is-error">
    <input placeholder="用户名">
    <div class="error">
        <span class="icon-error"></span> 用户名长度xxxxxx
    </div>
</div>
<style>
    .error{
        display: none;
    }
    .is-error input{
        border: 1px solid red;
    }
    .is-error .error{
        display: block;
        color: red
    }
</style>

然后根据校验结果动态修改 class 。文案可以动态也可以内置

---

https://element.eleme.io/#/zh...