• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

css操作 — 表单验证

效果图

原理

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

html

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

CSS