css骚操作 — 表单验证

2019-08-2019:45:51网页制作Comments2,319 views字数 786阅读模式

效果图

css骚操作 — 表单验证

原理

表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素;于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15707.html

html

布局很简单,inputbutton是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15707.html

<section class="container">
  <input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
  <input type="text" name="smscode" placeholder="请输入验证码" pattern="\d{4}" required><br>
  <button type="submit"></button>
</section>
复制代码

css

这里用的是scss预处理器,结构清晰文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15707.html

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

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

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

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

作者:聪明的汤姆
链接:https://juejin.im/post/5d47fb156fb9a06ad16f56bc
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15707.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/15707.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/15707.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定