css如何实现表单验证功能

input {

  // 验证通过时按钮的样式

  &:valid {

    &~button {

      pointer-events: all;

      cursor: pointer;

      &::after {

        content: "提交:+1:"

      }

    }

  }

  // 验证不通过时按钮的样式

  &:invalid {

    &~button {

      pointer-events: none; // 去除点击事件，让按钮无法点击

      &::after {

        content: "未通过验证:unamused:"

      }

    }

  }

}