利用 :valid 和 :invalid 来做表单即时校验

让表单检验变得简单优雅，不需要写冗长的 JS 代码来校验设置样式

html5 丰富了表单元素，提供了类 似 required、email、tel 等表单元素属性。同样的，我们可以利 用 :valid 和 :invalid 来做针对 html5 表单属性的校验。

• :required 伪类指定具有 required 属性的表单元素
• :valid 伪类指定一个通过匹配正确的所要求的表单元素
• :invalid 伪类指定一个不匹配指定要求的表单元素

<div>    <div>      <form>        <div>          <label>name</label>          <input type="text" required placeholder="请输入名称">        </div>        <div>          <label>email</label>          <input type="email" required placeholder="请输入邮箱">        </div>        <div>          <label>homepage</label>          <input type="url" placeholder="请输入博客url">        </div>        <div>          <label>Comments</label>          <textarea required></textarea>        </div>      </form>    </div>  </div>

.valid {  border-color: #429032;  box-shadow: inset 5px 0 0 #429032;}.invalid {  border-color: #D61D1D;  box-shadow: inset 5px 0 0 #D61D1D;}.form-group {  width: 32rem;  padding: 1rem;  border: 1px solid transparent;  &:hover {    border-color: #eee;    transition: border .2s;  }  label {    display: block;    font-weight: normal;  }  input,  textarea {    display: block;    width: 100%;    line-height: 2rem;    padding: .5rem .5rem .5rem 1rem;    border: 1px solid #ccc;    outline: none;    &:valid {      @extend .valid;    }    &:invalid {      @extend .invalid;    }   }}