css如何实现表单验证功能


本文摘自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代码

阅读剩余部分

相关阅读 >>

css怎样让图片居中

利用css实现鼠标悬停效果

css怎么把字体颜色改为白色

什么是css reset

动画工具dragonbones的常用术语和使用方法介绍(图)

css中权重是什么意思

html+css怎样实现纯文字和带图标的按钮

css如何修改字体

css中设置英文单词之间间距的属性是什么

css代表什么意思

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...