h5 表单验证属性

html

 <form>
    <div class="form__field">
      <!-- pattern 正则验证 required 必填 -->
      <input type="password" class="form__input" pattern=".{6,}" required />
      <span class="icon"></span>
    </div>
  </form>

  <p>密码必须是六个或更多</p>

css

/* valid 满足 */
.form__input:valid {
  border-color: forestgreen;
}

/* + 不能改 */
.form__input:valid+.icon::after {
  content: '😃';
}

/*  invalid 不满足 */
.form__input:invalid {
  border-color: firebrick;
}

.form__input:invalid+.icon::after {
  content: '😳';
}