JavaScript中两种验证显示效果，为什么输入合法显示还是不合法？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二种验证效果</title>
<!--    在输入框旁边用图片信息来显示提示效果-->
    <script type="text/javascript">
      function onclickFun(){
          var inpobj=document.getElementById("inp01");
         var inptext=inpobj.innerHTML;
         var patt=/^\w{5,12}$/;
         var spobj=document.getElementById("sp01");
         if(patt.test(inptext)){
           spobj.innerHTML=" <img src=\"1true.jpeg\" width=\"18\"   heigth=\"18\" />   ";
         }else{
             spobj.innerHTML="<img src=\"1wrong.jpeg\" width=\"18\"   heigth=\"18\" />  ";
         }
      //  在图片img标签中的  斜杠 表示转义字符
      }

    </script>
</head>
<body>
 用户名：<input type="text"  id="inp01" />
<span  id="sp01" style="color:red;" >  </span>
<button id="bnt01" onclick="onclickFun();" > 验证 </button>
</body>
</html>

输入的是合法的，但是还是显示的错误，这是为什么

img

第11行，获取input的值用value

 var inptext=inpobj.value;