本文摘自PHP中文网,作者V,侵删。
原理
表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素。
(推荐教程:CSS入门教程)
html代码
布局很简单,input跟button是兄弟节点的关系,required属性是必填的意思,也就是输入的内容必须要验证通过;
1 2 3 4 | < section class = "container" >
< input type = "text" name = "tel" placeholder = "请输入手机号码" pattern = "^1[3456789]\d{9}$" required>< br >
< input type = "text" name = "tel" placeholder = "请输入验证码" pattern = "\d{4}" required>< br >
< button type = "submit" ></ button >
|
css代码
阅读剩余部分
相关阅读 >>
原生js如何设置css
svg和css3实现环形渐变进度条的代码示例
css布局方法有哪些
css怎么设置字体立体
css鼠标样式
css盒子模型是什么意思?
css怎么用三种方法设置透明度
css box-sizing属性怎么用
css怎么让div不换行
css怎么显示svg图片
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何实现表单验证功能