你可能不知道的css骚操作 — 表单验证

andot 发布于2019-08-30 15:44 / 1979人阅读

摘要：效果图原理表单元素中，有一个属性，可以自定义正则表达式如手机号邮箱身份证伪类，可以匹配通过验证的元素伪类则相反，可以匹配未通过验证的元素于是就可以随便搞啦，上面的效果图只是做一些简单的效果，更多效果以及限制大家就发挥自己的想象力咯布局很

效果图

原理

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

html

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

css

这里用的是scss预处理器，结构清晰

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

      &::after {
        content: "提交

云服务器 GPU云服务器可能不知道地方你知道你应该知道你不知道的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116226.html

当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0
Android 截屏的各种骚操作

摘要：第四个提示不可截屏。代码设置不允许截屏在项目里面，通过设置可以让界面不允许执行截屏操作。这边实际测试验证了，只要禁止截屏的界面可见，就算它的回调了，也是不可以截屏的。本文公众号「AndroidTraveler」首发。背景在实际的应用场景中，Android 手机的截屏其实是很普遍的。比如说 PPT 演示，比如说技术博客图文并茂讲解。因此懂得 Android 手机截屏的各种操作就显得尤为...

番茄西红柿 2019-05-23 15:17 评论0 收藏0
如何写好一个vue组件,老夫的一年经验全在这了

摘要：比如很好用的拖拽库控制元素是否被拖动的行为。仅仅负责引入以及个人喜好把一个元素当做不可见的包裹元素，并在上面使用。你有什么写组件的独特技巧，不妨在评论区告诉我吧一个适用性良好的组件，一种是可配置项很多，另一种就是容易覆写，从而扩展功能 Vue 组件的 API 来自三部分——prop、事件和插槽： prop 允许外部环境传递数据给组件 event 允许从组件内触发外部环境的副作用 slo...

187J3X1 2019-05-22 10:29 评论0 收藏0
纯CSS实现表单验证

摘要：作者陈大鱼头关于表单验证在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。这里先上实现表单验证上面的表单验证就完全是由来实现的，核心属性就是的。作者：陈大鱼头 github： KRISACHAN 关于表单验证在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。一般我们的实现思路都是JS监听i...

番茄西红柿 2019-05-23 15:55 评论0 收藏0