css show 操作-表单验证

效果图

原理

form 元素包含属性 pattern，可以适配正则表达式（例如手机号码、邮箱、身份证... .;元素；所以你可以为所欲为。上面的效果图只是一些简单的效果，更多的效果和限制你可以发挥想象力；

html

布局很简单，输入和按钮是兄弟节点。属性required表示强制，即输入的内容必须经过验证；❙cs是scss 结构清晰的预处理器

input {
  // 验证通过时按钮的样式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;

      &::after {
        content: "提交?"
      }
    }
  }

  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件，让按钮无法点击（无法阻止键盘focus再回车触发）

      &::after {
        content: "未通过验证?"
      }
    }
  }
}

作者：Smart Tom
链接：https://juejin.im/post/5d47fb156fb9a06ad16fgg56bc※06ad16fgg56bc 作品版权归作者所有 商业转载请注明出处联系作者获取授权 非商业转载请注明出处。