css 使用 :placeholder-shown校验空值、提示不能为空

实现原理：

因placeholder内容只在空值状态的时候才显示，所以可以借助:placeholder-shown伪类来判断一个输入框中是否有值。

<template>
  <div style="padding:30px">
    <label for="">短信名称：</label>
    <input placeholder=" " /> <small></small>
    <br />
    <br />
    <label for="">短信内容：</label>
    <textarea placeholder=" "></textarea> <small></small>
  </div>
</template>

<style scoped>textarea:placeholder-shown + small::before,
input:placeholder-shown + small::before {
  content: "不能为空！";
  color: red;
  font-size: 87.5%;
}</style>