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动画怎么匀速

css中如何给整个页面添加背景颜色

书写css样式有哪三种方式

css background-origin属性怎么用

myeclipse怎么用css

css如何绘制一只萌萌哒的大熊猫?(代码示例)

css如何使用rem布局实现自适应效果

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




打赏

取消

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

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

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

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

评论

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