css如何实现表单验证功能

PHP中文网 JavaScript 百度已收录

本文摘自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定义背景图为什么显示不了

html中图片显示方式-----img与background的区别

如何在网页中引入外部js文件和css样式文件

css里怎样调节字体颜色

关于css中display:flex与inline-flex属性的详细介绍

css怎么写一个直角三角形

css样式重置

如何修改css样式

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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