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

当用户鼠标焦点离开某输入框时进行校验，且错误信息显示在输入框的下方，还有前面这个小符号怎么加啊！

如果不追求原生开发，可以使用做好的外部框架，不如layui，aceadmin,bootstrap这些成熟的框架。

<input type="text" name="username" value="Your name"  maxlength="20" οnfοcus="if (this.value=='Your name')  this.value='';" />
<input type="password" name="password" value="Your password" maxlength="20" οnfοcus="if (this.value=='Your password')  this.value='';" />

 function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var sinputCode =document.frmLogin.inputcode.value ;  
    if ((sUserName =="") || (sUserName=="Your name")){
     alert("请输入用户名!");
     return false ;
    }
     
    if ((sPassword =="") || (sPassword=="Your password")){
     alert("请输入密码!");
     return false ;
    }
    if ((sinputCode =="") || (sinputCode=="Your code")){
        alert("请输入验证码!");
        return false ;
       }

那个小图标不用图标 那就用字体图标 https://www.iconfont.cn/