注册送68元体验金

css骚操作表单验证功能的实现代码

  发布时间:2019-08-07 16:51:19   作者:佚名   我要评论

这篇文章主要介绍了css骚操作表单验证功能的实现代码,需要的朋友可以参考下

效果图

原理

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

html

布局很简单,input跟button是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过;

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

css

这里用的是scss预处理器

input {
  // 验证通过时按钮的样式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;
      &::after {
        content: "提交:+1:"
      }
    }
  }
  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件,让按钮无法点击
      &::after {
        content: "未通过验证:unamused:"
      }
    }
  }
}

总结

以上所述是小编给大家介绍的css骚操作表单验证功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对注册送68元体验金网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 纯CSS实现表单验证的示例代码

    这篇文章主要介绍了纯CSS实现表单验证的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-21
  • 使用HTML5和CSS3表单验证功能

    这篇文章主要介绍了使用HTML5和CSS3表单验证功能,需要的朋友可以参考下
    2017-05-05
  • 纯CSS3实现表单验证效果(非常不错)

    本文主要给大家介绍如何利用html5表单与CSS3-UI实现一款不错的表单验证效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-18
  • jQuery+CSS3实现的留言表格表单内容验证特效源码

    是一段主要应用于网页留言页面的表单验证效果代码,实例是针对留言页面制作的,有需要用在如:登录、注册页面的朋友们可以对该段代码进行修改使用
    2014-12-26
  • htm5+CSS3实现的表单美化带输入验证特效源码

    htm5+CSS3实现的表单美化带输入验证特效源码,是一段纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用,需要此段代码的朋友们可以前
    2014-11-26

最新评论