<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>&lt;input type="text"&gt; 示例</title>
    <style>
      div {
        margin-bottom: 10px;
        position: relative;
        }

        input[type="number"] {
          width: 100px;
        }

        input + span {
          padding-right: 30px;
        }

        input:invalid+span:after {
          position: absolute; content: '✖';
          padding-left: 5px;
        }

        input:valid+span:after {
          position: absolute;
          content: '✓';
          padding-left: 5px;
        }
    </style>
   </head>
  <body>
    <form>
      <div>
        <label for="uname">输入用户名：</label>
        <input type="text" id="uname" name="name" required
               placeholder="4-8个小写字母"
               pattern="[a-z]{4,8}">
        <span class="validity"></span>
      </div>
      <div>
        <button>提交</button>
      </div>
    </form>
    <script>

    </script>
</body>
  </html>
