web前端入门到实战:css骚操作之表单验证-创新互联
效果图
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:国际域名空间、网页空间、营销软件、网站建设、洪湖网站维护、网站推广。原理
表单元素中,有一个pattern
属性,可以自定义正则表达式(如手机号、邮箱、.);valid伪类
,可以匹配通过pattern
验证的元素;invalid伪类
则相反,可以匹配未通过pattern
验证的元素;于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯;
html
布局很简单,input
跟button
是兄弟节点的关系,required
属性是必填的意思,也就是输入的内容必须要验证通过;
css
这里用的是scss
预处理器,结构清晰
input {
// 验证通过时按钮的样式
&:valid {
&~button {
pointer-events: all;
cursor: pointer;
&::after {
content: "提交"
}
}
}
// 验证不通过时按钮的样式
&:invalid {
&~button {
pointer-events: none; // 去除点击事件,让按钮无法点击
&::after {
content: "未通过验证"
}
}
}
}
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
如果你喜欢这篇文章,请别忘记点个赞或者关注
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:web前端入门到实战:css骚操作之表单验证-创新互联
本文路径:http://pwwzsj.com/article/ddejpo.html