文档章节

web前端入门到实战:css骚操作之表单验证

梦想编程
 梦想编程
发布于 2019/12/14 13:50
字数 382
阅读 8
收藏 0

效果图

原理

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

html

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

<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预处理器,结构清晰

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

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

  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件,让按钮无法点击

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

如果你喜欢这篇文章,请别忘记点个赞或者关注

© 著作权归作者所有

梦想编程
粉丝 0
博文 114
码字总数 149105
作品 0
浦东
私信 提问
你可能不知道的css骚操作 — 表单验证🤦♂️

效果图 原理 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验...

不会写前端
2019/08/06
0
0
css掩人耳目式海浪动效🌊,这可能是最简单的实现方式了吧?

效果图 拆解 首先画一个简单的盒子: 利用与画两个圆角值()不同的不规则圆形: 父元素设置 最后加上动画让两个不规则圆形旋转起来即可👌 代码 html scss 总结 效果图第一眼看上去,让""部分...

聪明的汤姆
2019/08/09
0
0
这绝对是有史以来最详细的web前端学习攻略

  第一阶段:   HTML+CSS:   HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、   JavaScript基础:   Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、...

学习web前端
2017/10/12
0
0
库&插件&框架&工具

nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部署,可能大多数前端工程师...

掘金官方
2018/01/08
0
0
Python实战开发之Pyramid Web框架在商城项目中的应用实战资料

Python实战开发之Pyramid Web框架在商城项目中的应用实战资料 第一讲:Python基础和入门介绍(Web开发基础) 第二讲:Python语言基础(运算符与表达式,控制流,函数,模块) 第三讲:Pytho...

神人
2013/07/15
3K
4

没有更多内容

加载失败,请刷新页面

加载更多

Kettle自定义jar包供javascript使用

我们都知道 Kettle 是用 Java 语言开发,并且可以在 JavaScript 里面直接调用 java 类方法。所以有些时候,我们可以自定义一些方法,来供 JavaScript 使用。 本篇文章有参考自:https://www...

CREATE_17
昨天
102
0
处理CSV文件中的逗号

我正在寻找有关如何处理正在创建的csv文件的建议,然后由我们的客户上传,并且该值可能带有逗号(例如公司名称)。 我们正在研究的一些想法是:带引号的标识符(值“,”值“,”等)或使用|...

javail
昨天
79
0
如何克隆一个Date对象?

将Date变量分配给另一个变量会将引用复制到同一实例。 这意味着更改一个将更改另一个。 如何实际克隆或复制Date实例? #1楼 简化版: Date.prototype.clone = function () { return new ...

技术盛宴
昨天
73
0
计算一个数的数位之和

计算一个数的数位之和 例如:128 :1+2+8 = 11 public int numSum(int num) { int sum = 0; do { sum += num % 10; } while ((num = num / 10) > 0); return sum;......

SongAlone
昨天
124
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
昨天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部