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

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

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

效果图

原理

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

html

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

css

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

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

      &::after {
        content: "提交

超融合服务器服务器托管可能不知道地方你知道你应该知道你不知道的

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

转载请注明本文地址：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 手机截屏的各种操作就显得尤为...

wujl596 2019-05-22 19:16 评论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