css实现表单验证功能的代码示例
这篇文章主要为大家详细介绍了css实现表单验证功能的代码示例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
站在用户的角度思考问题,与客户深入沟通,找到卡若网站设计与卡若网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖卡若地区。
原理
表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素。
html代码
布局很简单,input跟button是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过;
css代码
这里用的是scss预处理器
input { // 验证通过时按钮的样式 &:valid { &~button { pointer-events: all; cursor: pointer; &::after { content: "提交:+1:" } } } // 验证不通过时按钮的样式 &:invalid { &~button { pointer-events: none; // 去除点击事件,让按钮无法点击 &::after { content: "未通过验证:unamused:" } } } }
关于css实现表单验证功能的代码示例就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
文章标题:css实现表单验证功能的代码示例
当前地址:http://myzitong.com/article/psoiie.html