为WordPress 评论框添加HTML5 表单验证

WordPress 中最常用到的表单莫过于评论框了,但现在不少的WordPress 主题(包括WordPress官方的主题),其表单验证其实是借助javascript 甚至php来的。因此,访客常常是要点击“提交评论”按钮,然后跳转到错误提示页面才知道哪里写的不够规范。这么来说,用户体验不怎么好。借助HTML5 的表单验证,我们可以轻松解决这个问题,让UE 更上一层楼。

HTML5新的表单特性

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

两个特殊的验证熟悉

required属性——浏览器会自动验证用户是否输入了该字段,如果不输入无法提交表单;

placeholder属性——可以给表单一段默认的文字,对用户进行提示,获得焦点的时候不会消失,当用户开始输入内容时会自动消失;

对于WordPress 的话,评论框中需要用到email与url(对应电子邮箱,网站)。结合required属性、placeholder属性,原来的代码应该修改为类似如下:

<input type="text" name="author" id="author" value="xxxx" tabindex="1" placeholder="昵称" required /> <input type="email" name="email" id="email" value="xxxx" tabindex="2" placeholder="邮箱" required/>

如果浏览器支持HTML5,那么访客如果不正常输入相关内容就提交表单,浏览器(图示为chrome浏览器)会如下图提示:

没有输入必填项:

邮箱输入错误:

地址输入错误:

实际效果可在下面的评论框进行测试。

立马高端大气上档次有木有!不过要浏览器支持html5才行,某IE 就不用考虑了。

本文部分内容参考:w3school中文版;《HTML5开发实例大全》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FD的专栏

React 中引入 Angular 组件

为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的...

11130
来自专栏猿人谷

ubuntu的美化

一、Usplash画面(开机/启动画面) 它就相当于Windows的开机/启动画面,因为 ubuntu 使用usplash这个软件作为启动画面,所以我们就叫它为...

26190
来自专栏速成应用小程序开发平台

新手教程|速成应用教你如何制作搭建自己的微信小程序

微信小程序已经迈入了爆发阶段,很多中小企业和商户正在不断涌入这个市场。但是很多不懂技术不懂代码的小白却不知道去哪里制作微信小程序,现在就以可视化小程序开发工具「...

2.6K50
来自专栏DeveWork

修改WordPress 搜索结果页面url 形式,安全有保障

偶然发现开源中国(OSC)的搜索功能不能在非用户登录情况下使用,据说是被攻击了,无奈之下只得关闭游客搜索功能;据说WordPress 也可以通过向搜索地址传递某...

251100
来自专栏知晓程序

想在小程序中快速部署富文本?这个插件让你一步搞定

24930
来自专栏iOS Developer

微信小程序开发教程-从零开始(2)

20960
来自专栏Web 开发

Deploy WordPress On SAE

也没怎么刻意去选择,从各种cPanel主机,到VPS,再到AppFog等Pass,基本上都玩了一遍了。

10200
来自专栏coding for love

浏览器为契机贯穿前端知识点-大纲参考

ps:动画不连贯,因为浏览器渲染有一个最小时间间隔(这块之前搜藏了) 涉及如下部分:

9210
来自专栏freesan44

实现 iOS 前台时的推送弹窗效果

原文链接:http://www.jianshu.com/p/67864e1c2085

17820
来自专栏QQ会员技术团队的专栏

一起脱去小程序的外套和内衣:微信小程序架构解析

微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起...

6K30

扫码关注云+社区

领取腾讯云代金券