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代码

阅读剩余部分

相关阅读 >>

原生js如何设置css

svg和css3实现环形渐变进度条的代码示例

css布局方法有哪些

css怎么设置字体立体

css鼠标样式

css盒子模型是什么意思?

css怎么用三种方法设置透明度

css box-sizing属性怎么用

css怎么让div不换行

css怎么显示svg图片

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




打赏

取消

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

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

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

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

评论

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